发现了一个很好用的库WOW.js，他可以实现比如网页的一个区域从空白的地方插入等效果，而且他自带了动画的效果animate.css，相当于我们什么都不用做了，只要引入css、js，然后初始化，给要添加动画的元素增加对应的类就可以了。简直太方便了。

WOW.js介绍

有的页面在向下滚动的时候，会有一些元素产生细小的动画效果，虽然动画效果比较小，但是却能很吸引人的注意。WOW.js依赖animate.css，所以他支持多达60多种动画效果，能满足我们大部分的使用场景。

浏览器兼容

由于IE6、IE7老旧浏览器不支持CSS3动画，所以没有效果，而WOW.js也使用了querySelectorAll方法，IE低版本会报错。为了达到更好兼容性，可以增加一个浏览器版本判断。 所以基本是可以放心使用了

WOW.js使用方法

• 1.引入CSS文件

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

• 2.引入js文件

<script type="application/javascript" src="js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

如果需要引入自定义配置，也可以这样配置使用

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

• 3.直接使用 在需要加上动画的元素上增加对应的类或属性就可以了。

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

也可以加入属性控制动画持续时间（data-wow-duration）和动画延迟时间（data-wow-delay）

<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>

配置说明