前端-框架实战（二）之WOW

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

1.基本的布局

2.布局添加样式

3.JavaScript中进行初始化

3.WOW滚动案例

1.修改布局

执行效果：

2.修改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/

1.探究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实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。

但是在实际开发中，更多时候动画是只加载一次，否则会造成视觉错乱。那如果要多次重复展现动画该如何处理呢？