用wow.js配合animate.css来让页面滚动变得有趣起来~

近期的项目需要一些动画来提升用户体验，吸引用户注意力。Animate.css是个不错的选择，如果再加上wow.js那就很完美了

1、官方文件下载地址

Animate.css 官网： https://daneden.github.io/animate.css/

bootcdn CDN服务： https://www.bootcdn.cn/animate.css/

wow.js官网：http://mynameismatthieu.com/WOW/

bootcdn CDN服务：http://www.bootcdn.cn/wow/

wow.js依赖animate.css，不需要jQuery；animate.css是纯css动画 ！

2、使用方法

1.引入animate.css文件

在页头head中添加如下代码：

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

2.引入wow.js文件

在引入的css文件下方添加如下代码：

<script src="wow.min.js" type="text/javascript"></script>

3.HTML代码

<div class="wow fadeInLeft"></div>
<div class="wow fadeInRight"></div>

可直接在标签上加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如下：

<div class="wow fadeInLeft" data-wow-duration="2s" data-wow-delay="4s"></div>
<div class="wow fadeInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

注意：wow类名必须加在动画类名之前！

3.JavaScript代码

new WOW().init();

自定义配置，可如下使用：

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

属性/方法	类型	默认值	说明
boxClass	字符串	'wow'	需要执行动画的元素的 class
animateClass	字符串	'animated'	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

---