Introduction

html5show is a pure lightweight Javascript library using HTML for layout,CSS3 for animation. It does not depend on any third party libraries.

The library is inspired by two CSS3 animation project Animate.css and CSS3 ANIMATION CHEAT SHEET. We use Javascript to do a more detailed control and enhancements.

If you want to get started, please visit our home page.

Before proceed further, there are some important concepts need to figure out.

• Container:   html element used to wrap all of the elements in show.
• Page:   a stage which animations can run in, one html5show can have one or several pages.
• Sprite:   animated element,each page can have several sprites in it.

Notice,all the time related numbers we mentioned below are for seconds.

Config

The library has some basic options, you can put these options to either container element's dataset attributes or use Javascript code.

The following two codes are equivalent

        <div id="showBox" data-arrow="true" data-indicator="false">

        </div>

        <script>
          var html5show = new html5show('showBox');
        </script>
            

        <div id="showBox">

        </div>

        <script>
          var html5show = new html5show('showBox',{arrow:true,indicator:false});
        </script>
          

Let's explain more details of options, here is the default options.

        {
        play: false, // whether auto goto and  play next page when current page is shown.

        direction: 'horizontal', //default page animation direction,values:'horizontal','vertical'

        indicator: true, //  dots which indicate the whole pages indexes and  active page.

        arrow: false, // shape button link to next page or previous page.

        index: 0,     //default page index when the show is created.

        urlHash: false, //whether rewrite url hash,
                        //if the page have only one show,it can be true.
                        //see demo page for example.

        //default page options, can be override by each page options.
        page: {
            show: null, //default  animation class when page show,
                        //if value is null,the library will  set animation automatically
            hide: null, //default animation class when page hide , same as show

            duration: 1.5, //default page animation duration,1.5 represents 1.5s

            stay:0  //how long will the page stay
                    //eg: 10 represents 10s
                    //default value is 0 means the library will auto calculate.
        },

        //default sprite options,can be override by each sprite options.
        sprite: {
            show: 'fadeIn', //default  show animation class of sprite

            hide: 'fadeOut',//default hide animation class of sprite

            showing: null,//default  showing animation class of sprite

            duration: 1 //default  animation duration, 1 represents 1s
        }


      

Layout

html5show mainly use absolute position for layout, but it doesn't not means you must set every thing with position:absolute , it's just for convenient, you can write css usual. If you are good at css, we suggest you do that. Let's explain layout by example codes

Size and Position

<div id="layout1" >
  <div class="page">
    <div data-size="50" data-pos="10"> sprite1 </div>
    <!-- same as below -->
    <div data-size="50,50" data-pos="10,10"> sprite1 </div>

    <div data-size="20%,30%" data-pos="-10,-10"> sprite2</div>
  </div>
</div>
          

Size(data-size attribute) option define the width and height of the sprite element, values can be number or percentage separated by comma. eg: data-size="20,100%"

data-size="50,100" result in css style: width:50px; height:100px;
data-size="50%,200" result in css style: width:50%; height:200px;

If width and height are equal,it can be abbreviated with single value

data-size="100" equal with data-size="100,100"

If you just want only the width or height left another auto size, value can be set to 'auto'

data-size="100,auto" result in css style width:100%;

Pos(data-pos attribute) option define the position (xpos,ypos) of the sprite element, values can be number or percentage separated by comma, each value can be set to negative.

data-pos="20,20" result in css style: left:20px; top:20px;
data-pos="20%,10%" result in css style: left:20%; top:10%;

data-pos="20,-20%" result in css style: left:20px; bottom:20%;
data-pos="-20,-20" result in css style: right:20px; bottom:20px;
data-pos="-0,-0" result in css style: right:0; bottom:0;

If the values are equal,it can be abbreviated with single value

data-pos="20" equal with data-pos="20,20"

Origin

Origin(data-origin attribute) is related to size and position, affect then position of the sprite element.Let's take a example then explain.

<div id="layout2" >
<div class="page">
  <div data-size="80" data-pos="50%" data-origin="bottom,right"> right,bottom </div>
  <div data-size="80" data-pos="50%" data-origin="center"> center </div>
  <div data-size="80" data-pos="50%" > default </div>
</div>
          

<div id="layout3" >
  <div class="page">
    <p data-fontsize="18">sp1 font-size:18px;</p>
    <div data-pos="0,25%" data-size="100%,50" data-bg="#0a0">sp2 green background</div>
    <div data-pos="0,50%" data-size="100%,50" data-bg="#FFA955">sp3 orange background</div>
    <div data-bg="#fff" data-opacity="0.3" data-size="100" data-pos="50%" data-origin="center"  ></div>
  </div>
</div>
              

Animation

html5show use CSS3 for all page and sprite animations, if you are not familiar with CSS3 animations please visit w3cschools website. We don't need you to learn everything about CSS3 animations, just know the basic concepts of it.

The two CSS3 animation project Animate.css and CSS3 ANIMATION CHEAT SHEET we mentioned above,simplify the CSS3 animation with css classes, you can create animation by just adding class to the target element.

Now, let's explain how to use these animation classes in html5show.

Page animations

The library will calculate the page animation class automatically by default. Here are two examples

<div id="ani1" data-arrow="true" data-indicator="false">
  <div class="page">page1</div>
  <div class="page">page2</div>
</div>
            

<div id="ani1" data-direction="vertical" data-arrow="true" data-indicator="false">
  <div class="page">page1</div>
  <div class="page">page2</div>
</div>
            

Show (data-show attribute) option define the animation class when page show.

Hide (data-hide attribute) option define the animation class when page hide.

All available animation classes can be found by Animate.css and CSS3 ANIMATION CHEAT SHEET . You can also write your own animation classes by yourself, import to page and use them,it's very interesting!

The below example shows how to use the custom animation class.

<div id="ani3"   data-arrow="true" >
  <div class="page" data-show="bounceInLeft" data-hide="zoomOut" data-bg="#090">page1</div>
  <div class="page" data-show="zoomInDown" data-hide="zoomOut" data-bg="#FFA955">page2</div>
</div>
            

Sprite animations

The sprite animation is very similar with page animation which has more features.You can determine when the sprite will show, how long it will stay and how to animate when showing . Here is an example.

<div id="ani4"   data-arrow="true" >
  <div class="page">
    <div data-time="0.5" data-show="pullDown" data-size="50%,100%" data-bg="#ccc"></div>
    <div data-time="1" data-show="pullUp" data-size="50%,100%" data-pos="50%,0" data-bg="#096"></div>
  </div>
  <div class="page">
    ...
  </div>
</div>
          

Time (data-time attribute) option define when will the sprite show in current page, value must be a number which represent second. eg: 1 means 1s.

Show (data-show attribute) option define the animation class when sprite element show in page.

Hide (data-hide attribute) option define the animation class when sprite element hide.

Showing (data-showing attribute) option define the animation class when sprite is already displayed in the page. Using nested sprites can also implement this feature. You can compare two ways by following example.

<div id="ani5"  data-play="true" >
  <div class="page">
    <div data-size="50"data-pos="33%,50%" data-origin="center" data-bg="#666"
         data-time="0.5" data-show="expandOpen" data-showing="pulse"></div>
    <!--Nested sprites-->
    <div   data-size="50"  data-pos="66%,50%" data-origin="center" data-time="3" data-show="expandOpen" >
      <div class="pulse" data-size="100%" data-bg="#666" ></div>
    </div>
</div>
          

Stay option define how long will the sprite display,value must be a number which represent second.

<div id="ani6" class="example-box example-ani" data-arrow="true">
  <div class="page">
    <div data-size="50" data-pos="50%" data-origin="center"  data-bg="#666"
         data-time="0.5" data-show="zoomInLeft" data-stay="1" data-hide="zoomOutRight"></div>
  </div>
  <div class="page">
     ...
  </div>
</div>
          

Duration option define how long will animation continued ,value must be a number which represent second.

<div id="ani7"  data-play="true" >
  <div class="page">
    <div data-size="50" data-pos="33%,50%" data-origin="center"  data-bg="#666"
         data-time="0.5" data-show="zoomIn">1.5s</div>
    <div data-size="50" data-pos="66%,50%" data-origin="center"  data-bg="#666"
         data-time="0.5" data-show="zoomIn" data-duration="3">3s</div>
  </div>
</div>
          

One more thing, if you feel that animation is not strong enough and don't want to write additional css, you can compose the sprites to form new animations. Here is example.

<div id="ani8" class="example-box example-ani"  data-arrow="true" >
  <div class="page">
    <div data-time="0.5" data-show="rollIn" data-size="50" data-pos="50%" data-origin="center" >
      <div data-time="0.5" data-show="expandOpen"> data-size="100%" data-bg="#666"
      </div>
    </div>
  </div>
</div>