html5show

What is html5show

html5show is a lightweight library to create animation using Html with little Javascript code, it's for both developers and designers, you just need to write simple Html, then left all other things to the library.

It can be used to create sliders,welcome pages,presentations etc. Really easy to use,hope you will enjoy it!


download html5show.min.js


Let's get started

1. Add stylesheet to the <head> element of your html.


        <link rel="stylesheet" type="text/css" href="{path}/html5show.css">

Put html5show.js to appropriate place (commonly before the </body>) of your html.

If your want to support the mobile touch events, put hammerjs (Thanks to author:Jorik Tangelder:) before html5show.js:


        <!--<script type="text/javascript" src="{path}/hammer.min.js"></script>-->
        <script type="text/javascript" src="{path}/html5show.min.js"></script>

2. Add a container in which you put the animation pages.

        <div id="showbox">

        </div>

Set the container size,make sure position is relative or absolute,set overflow hidden. 

        #showBox{
          width:500px
          height:300px;
          position: absolute;
          overflow: hidden;
        }

3. Add animation pages and sprite elements in it,set class:'page' to each page element.


         <div id="showBox">
            <div class="page">
                <h1>Hello html5show</h1>
                <p>Amazing</p>
                <p>Flexible</p>
                <p>Powerful</p>
            </div>
            <div class="page">
              ...
            </div>
         </div>

4. Now, let's add some magic , add dataset attributes to the elements which set the showtime and animation. 


        <div id="showBox">
          <div class="page">
              <h1 data-time="0.5" data-show="expandOpen">Hello html5show</h1>
              <p data-time="1" data-show="fadeInLeft">Amazing</p>
              <p data-time="1.25" data-show="fadeInLeft">Flexible</p>
              <p data-time="1.5" data-show="fadeInLeft">Powerful</p>
          </div>
          <div class="page">
            <h2>page2</h2>
          </div>
       </div>

5. Last Step,using Javascript to create the html5show.


        <script>
          (function(){
          var show = new html5show('showBox',{play:true});
          })();
        </script>

OK, It's done ! Let's check the result.

Hello html5show

Amazing

Flexible

Powerful

Life is beautiful!


Visit our docs page for more details, and demo page to see some advanced usages.


Thanks

html5show is inspired by two CSS3 animation project Animate.css and CSS3 ANIMATION CHEAT SHEET,we strongly recommend you to visit these excellent projects.