给大家分享一个小插件，名字叫做WOW.js,这个插件是基于animate.css，animate.css是现在很流行的css动画库。这款插件作用很简单，可以及时实现网页中任意部分动画切入的效果。但是有2点要注意的地方
（1）此动画是检测屏幕滚动条实现达到一定位置执行动画效果的，所以当指定元素开始显示的时候才会开始动画，这个可以自定义。
（2）每个元素只能执行一种动画，不能同时实现多种动画一起播放的效果现在就来详细介绍一下这个插件如何使用，先贴上一个demo的例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WOW轻松让网页实现动画效果</title>
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<style type="text/css">
body{overflow-x:hidden;font-family:"Microsoft Yahei";}
body h1{width:100%;margin:80px 0;font-size:50px;font-weight:500;text-align:center;}
body .txt{margin:80px 0;font-size:16px;text-align:center;}
.dowebok{margin:0 auto;}
.dowebok ul{list-style-type:none;}
.dowebok .m_list{font-size:0;text-align:center;}
.dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";
vertical-align:top;*display:inline;zoom:1;}
.bg-green{background:#5bd5a0;}
.bg-blue{background:#1daee9;}
.bg-purple{background:#c843a5;}
.bg-red{background:#eb3980;}
.bg-yellow{background:#ffcc35;}
</style>
</head>
<body>
<h1>WOW.js - 页面滚动动画展示</h1>
<p class="txt">WOW.js 能让页面滚动时显示动画，使页面更有趣。</p>
<div class="dowebok">
<div class="m_list">
<div class="wow rollIn bg-blue"></div>
<div class="wow bounceInDown bg-green">WOW.js</div>
<div class="wow lightSpeedIn bg-purple"></div>
</div>
<div class="m_list">
<div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div>
<div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
<div class="wow bounceInRight bg-blue">轻量级</div>
</div>
<div class="m_list">
<div class="wow bounceInLeft bg-green"></div>
<div class="wow flipInX bg-purple">WOW.js</div>
<div class="wow bounceInRight bg-yellow"></div>
</div>
<div class="m_list">
<div class="wow rollIn bg-blue">无需 jQuery</div>
<div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
<div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div>
</div>
<div class="m_list">
<div class="wow rollIn bg-red"></div>
<div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
<div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div>
</div>
<div class="m_list">
<div class="wow bounceInLeft bg-purple">依赖 animate.css</div>
<div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div>
<div class="wow lightSpeedIn bg-yellow">多种动画</div>
</div>
<div class="m_list">
<div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div>
<div class="wow bounceInUp bg-red">WOW.js</div>
<div class="wow bounceInRight bg-purple"></div>
</div>
<div class="m_list">
<div class="wow rollIn bg-red" data-wow-delay="0.5s">无需 jQuery！？</div>
<div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
<div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">谢谢</div>
</div>
<div class="m_list">
<div class="wow rotateIn bg-red" data-wow-delay="0.5s">测试</div>
<div class="wow bounceInDown bg-green" data-wow-delay="1s">测试</div>
<div class="wow fadeInUpBig bg-yellow" data-wow-delay="1.5s">测试</div>
</div>
</div>
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<script>
//初始化
new WOW().init();
</script>
</body>
</html>
首先，介绍插件需要插入的文件和初始化流程，因为这个插件是基于animate编写的，所以插入文件得注意一下，需要引入animate.css
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
然后是引入WOW.js 引入的同时需要初始化init下。
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<script>
//初始化
new WOW().init();
</script>
接下来我们学习下怎么自定义动画
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true});
boxClass 填字符串 ‘wow’是需要执行动画的元素的 class名
animateClass 字符串 ‘animated’是animation.css 动画自带的 class名
offset 整数 0 表示目标元素距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效
然后介绍一下动画播放的一些属性：
data-wow-duration="3s" 设置动画播放一次需要的时间
data-wow-delay="3s" 设置动画延迟多久开始执行
data-wow-iteration="5" 设置动画执行多少次
这些自定义属性只需要加在需要执行动画的html代码中就可以。
再介绍一下常用的几种默认动画样式：
lightSpeedIn：从右慢慢摇曳进入
rollIn：从左边旋转进入
pulse:变大
flipInX:绕x轴晃
shake:左右晃动
swing:吊在那要摇晃
bounce:原地上下抖动
bounceInLeft:从左方进来上下抖动
bounceInRight:从右方进来上下抖动
bounceInDown:从上方进来上下抖动
bounceInUp:从下方进来上下抖动
更多效果可以去 animate.css 官网 ：https://daneden.github.io/animate.css/
