Story Tale

Make your website a step by step experience.

It all started with the a simple idea

We wanted to give websites the posiblity to tell their Story, but it seemed to simple, we've wanted to do more, so we've created Story Box.

It seemed to simple, so we wanted to achieve even more, so we've upgraded Story Box to make an entire website a Story, but not what we initially wanted, a true Story, from Text

And now, We want to offer the initial feeling, with Story Tale


CSS Transitions

     We use the transitions Provided by Animate.CSS, they are smooth & awesome

Cross Browser & Device

     Story tale works on any major browser, it doesn't effect older browsers and it simply doesn't animate anything

Works independently

     This jQuery Extension works alone, you don't need any Javascript Skills, Only HTML


Entrance Created with Story Tale





Usage Demonstration


HTML

          <div data-story-tale="rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight">
              <h2><span data-story-tale-item>It all started with the a simple idea</span></h2>
              <p><span data-story-tale-item>We wanted to give websites the posiblity to tell their Story, but it seemed to simple, we've wanted to do more, so we've created Story Box.</span></p>
              <p><span data-story-tale-item>It seemed to simple, so we wanted to achieve even more, so we've upgrated Story Box to make an entire website a Story, but not what we initially wanted, a true Story, from Text</span></p>
              <h2><span data-story-tale-item>And now, We want to offer the initial feeling, with Story Tale</span></h2>
          </div>
        

Result

It all started with the a simple idea

We wanted to give websites the posiblity to tell their Story, but it seemed to simple, we've wanted to do more, so we've created Story Box.

It seemed to simple, so we wanted to achieve even more, so we've upgraded Story Box to make an entire website a Story, but not what we initially wanted, a true Story, from Text

And now, We want to offer the initial feeling, with Story Tale








Example Demonstration




Andrei-Robert

Developer

     Is developing most of the work branded as Easy Development
     Andrei always makes sure EasyDevelopment provides High Quality Work
     Favorite Framework : Zend.
     Skills : PHP 5.4, jQuery, Zend Framework, Laravel, Symfony 2, Drupal 7, Wordpress, BackBone.JS

Achieve Even More - Nested Display




AWESOME


Do Crazy Stuff - Text Groups




MVC: Indicates whether the framework comes with inbuilt support for a Model-View-Controller setup.

Multiple DB's: Indicates whether the framework supports multiple databases without having to change anything.

ORM: Indicates whether the framework supports an object-record mapper, usually an implementation of ActiveRecord.

DB Objects: Indicates whether the framework includes other database objects, like a TableGateWay.

Templates: Indicates whether the framework has an inbuilt template engine.

Caching: Indicates whether the framework includes a caching object or some way other way of caching.


Usage Demonstration


Step One

You start by setting a "Panel Zone", a Panel Zone is a container which has a story to be said.

A panel zone is added by adding the following attribute to a HTML Element data-story-tale

That attribute informs the application, assigning default effects for the elements inside that Panel for example data-story-tale="rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight"

Step Two

Now, inside the defined panel, you have two options, add text stories, or content block ( any HTML attribute ).

Name Description
data-story-tale-item This is used for marking a text zone, this is used for Stricly TEXT Only, to achieve an awesome Text Story Display
data-story-tale-container This is used for marking a block zone. This can be used anywhere.

Step Three

Adding one of the two possible attributes, data-story-tale-item, data-story-tale-container.

For example, if I want to have assign story tale to the following structure

        <div>
          <p>Have you ever saw the Easy Development Logo ?</p>
          <p>You can see it now !</p>
          <img src="http://2.s3.envato.com/files/64998712/80x80.png"/>
        </div>
      

After Adding Story Tale it would look like this

        <div data-story-tale="rotateInDownLeft, rotateInDownRight">
           <p data-story-tale-item>Have you ever saw the Easy Development Logo ?</p>
           <p data-story-tale-item="fadeInUp">You can see it now ! ( not using default effect here )</p>
           <img data-story-tale-container="fadeInLeftBig" src="http://2.s3.envato.com/files/64998712/80x80.png"/>
        </div>
      

What's the difference between Story Box And Story Tale ?

The Scope

     Story Tale has the purpose to display items step - by - step, one item at a time, when they're visible to you ( you're looking where they are going to appear )

     Story Tale can have the same behavior of Story Box, but their scope is different

     Story Box has the purpose to display items right when they're visible to you ( you're looking where they are going to appear )

Example

     Let's say you have 4 containers of content, and we'll name them div-1, div-2, div-3, div-4

     Let's say you're scrolling down, from top to bottom

     As you've scrolled down Story Box has animated everything nicely appearing as you wanted

     As you've scrolled down Story Tale has started to animate content, but Story Tale will display content in a certain order

How Does Story Tale do it ?

     Story Tale will detect your movement on the webpage, when you're viewing an area that has been marked by Story Tale is will start to display content step by step, even if you're looking at div-1, div-2, div-3, div-4 ( as previously stated, 4 content containers ), it will display each of them step by step, first div-1 then div-2 after div-1 has been fully displayed and the animation has been completed, and so on, Story Tale has no limits on how many divs it can show

     Also Please note that Story Tale is different than Story Box, In Story Tale you define Story Areas in which you define Story Items, and only the elements you want are animated.