WOW.js 和 animate.css 使用

animate.css 动画样式，用户也可以非常容易修改设置喜欢的动画库。

Wow.js 允许用户滚动页面的时候展示 CSS 动画。配合animate.css ，做出很棒的效果，它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

animate.css使用效果：

https://www.dowebok.com/demo/2014/98/

https://www.cnblogs.com/xiaohuochai/p/7372665.html

【下面依次测试各种class类名的动画效果】

下面说说页面滚动页面时的元素变化效果。

1 添加css,js

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

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

2 页面添加元素

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

3、可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如.（在css下方js上方写需要动画的元素（必须设置为块状或者行内块状），并添加class类名。)

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

　　类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

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

<script>

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

new WOW().init();

};

</script>

5、也可以自定义wow.js

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();