JS special effect of rolling loading animation on website page (II)

Released yesterday Website page scrolling loading animation JS special effect However, the loaded page is not perfect. The article page cannot be loaded directly, and the scroll bar needs to continue. It may be caused by not adjusting the js. So today I retested wow.js, and I feel this is good. I like it very much. If you are interested, you can test it. When the page scrolls down, some elements will produce small animation effects. Although the animation is small, it can attract your attention. For example, just released the iPhone 6 page (view). If you want your page to be more interesting, you can try WOW.js.

WOW.js relies on animate.css, so it supports more than 60 animation effects of animate.css, which can meet your various needs.

Browser compatible

IE10+	Chrome	Firefox	Opera	Safari

Old browsers such as IE6 and IE7 do not support CSS3 animation, so they have no effect; However, wow.js also uses the querySelectorAll method, and the lower version of IE will report an error. In order to achieve better compatibility, it is better to add a browser and version judgment.

usage method

1. Import file (built-in css style)

 <link rel="stylesheet" href="animate.min.css">

2. HTML (add two css attributes to the div that needs scrolling animation)

 <div class="wow fadeInDown"></div>

The CSS in the div framework can be customized, such as imagination. You can try more interesting functions yourself.

 <div class="wow slideInLeft"></div> <div class="wow slideInRight"></div>

You can add data wow duration and data wow delay attributes, such as:

 <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

3. JavaScript (finally, introduce js and script statements)

 <script src="/wow.js"></script> <script>     wow = new WOW(     {     animateClass: 'animated',     offset:       100,     callback:     function(box) {     console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")     }     }     );      wow.init();      </script>

If you need custom configuration, you can use it as follows:

 var wow = new WOW({     boxClass: 'wow',     animateClass: 'animated',     offset: 0,     mobile: true,     live: true }); wow.init();

to configure

This is different from the last one. The other steps of css+script are the same. Other functions have not been tested. You can DIY yourself.