wow.min.js 支持css3多种动画的效果！

今天发现一个非常有趣的js，wow.min.js，Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。wow.min.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。

WOW.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。

   实例如下 点击查看》》

使用方法：

1、加入animate.css

<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">

2、加入wow.js

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

3、元素中加入class

<div class="wow animated tada">tada</div>

选择想要的效果，并加入animate.css的class，如：tada，animate效果在下面链接查看

66种CSS3animation动画效果，← 点击查看

4、可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如

<div class="wow animated wobble" data-wow-duration="4s" data-wow-delay="3s"></>wobble</div>

5、wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new WOW().init();
};
</script>

6、也可以自定义wow.js

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

增加顺序动画

在标签上增加 

data-wow-delay="0.3s"

如：