wow.js是一款结合了Animate.css，可以在页面向下滚动时，为页面中的元素加载动画的js。
项目地址：GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page
CDN:Animate.css/ajax/libs/animate.css/3.7.2/animate.min.css
CDN:wow.js/ajax/libs/wow/1.1.2/wow.min.js
使用方法：
1、wow.js的使用必须依赖于上篇文章介绍的Animate.css，所以在使用前需要先引入Animate.css。
<link rel="stylesheet" href="css/animate.min.css">
2、头部引用并激活wow.js。
<script src="js/wow.min.js"></script><script>new WOW().init();</script>
3、给需要动画的页面元素添加wow和Animate类；其中wow是必须项，Animate效果类参考上一篇文章中的ClassName。
<div class="wow fadeInLeft"><img src="exp.jpg"/></div>
如果默认效果无法满足需求，可以通过使用高级类进行进一步的自定义；
data-wow-duration: 动画持续时间；
data-wow-delay: 动画开始前的延迟时间；
data-wow-offset: 激活动画的距离（相对于底部位置）；
data-wow-iteration: 动画的重复次数；
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section><section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
4、自定义设置
wow = new WOW({boxClass:'wow',// 需要执行动画的元素的类名animateClass: 'animated', // animation.css 动画类名offset: 0,// 设置滚动触发动画的距离（相对于底部）mobile: true, // 是否在移动设备执行动画live: true // 异步加载的内容持续检测})wow.init();
动画类名称如下：
除了使用默认的效果外，如果觉得不满意，还可以对效果进行自定义，比如设置效果延迟和速度；使用方法同样是在样式中添加对应的Delay Class 和Slow, Slower, Fast, and Faster Class。
<div class="animated bounce delay-2s">Example</div>/* delay-2s 2s; delay-3s 3s; delay-4s 4s; delay-5s 5s */<div class="animated bounce faster">Example</div>/* slow 2s; slower 3s; fast 800ms; faster 500ms */
除了基本的调用方法外，还可以使用动态调用，通过给JS添加或删除class，可以实现动态效果：
<button id="btn1">添加</button><button id="btn2">移除</button><div id="box" class="box"></div><script>var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var oBox = document.getElementById('box');oBtn1.onclick = function(){oBox.classList.add('animated');oBox.classList.add('flash');}oBtn2.onclick = function(){oBox.classList.remove('flash');}</script>
如果动画是无限播放的，可以添加 class infinite。
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
$(function(){$('#dowebok').addClass('animated bounce');});
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){$('#dowebok').addClass('animated bounce');setTimeout(function(){$('#dowebok').removeClass('bounce');}, 1000);});
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#dowebok {animate-duration: 2s; //动画持续时间animate-delay: 1s; //动画延迟时间animate-iteration-count: 2; //动画执行次数}
