单次滚动动画插件：WOW

1.简介

官网：http://mynameismatthieu.com/WOW/
GitHub：https://github.com/matthieua/WOW

1 核心作用：让页面滚动更有趣**

通过WOW.js，可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

2 特点

轻量级类库， 不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。

3 兼容性考虑

因为，WOW要和Animate配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

2.最简单的使用

1.引入WOW和Animate

2.在布局中使用wow和animate

基本的布局

布局添加样式

JavaScript中进行初始化

3.WOW滚动案例

修改布局

执行效果：

修改item的动画

4.WOW的常用属性

• data-wow-delay: 动画开始前延迟
• data-wow-duration: 动画持续时长
• data-wow-iteration: 动画重复次数
• data-wow-offset: 浏览器底部到指定item的顶部的距离（偏移量）

来搞定它? 可以加入data-wow-duration（动画持续时间）和data-wow-delay（动画延迟时间）等属性。比如：

• data-wow-offset：用于决定当前的元素在滚动的时候 , 到达怎样的位置出现（是在滚动之前出现、滚动之后出现，还是滚动的时候出现）http://mynameismatthieu.com/WOW/

探究data-x-offset意思
1.图解

2.布局代码

3.js代码

5.WOW的默认配置参数

var wow = new WOW({
  boxClass: 'wow', // 动画元素的CSS类（默认类名wow）
  animateClass:'animated', // 动画CSS类 （默认类名animated）
  offset: 0, // 距离可视区域多少开始执行动画（默认为0）
  mobile: true, // 是否在移动设备上执行动画 （默认是true）
});​
wow.init();

6.WOW存在的问题

WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。