页面滚动加载动画之WoW.js

https://www.delac.io/wow/官网

https://github.com/matthieua/WOW 下载地址

当网页的向下滚动的时候，有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己写判断位置和动画结合的话也是可以但是动画效果不是特理想需要多次调试，其次也是很麻烦的所以该插件帮我们 写好了，我们只需要在浏览器滚动到该盒子位置为他加上在animate.css我们需要的效果类名既可。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

兼容性能：；wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。iE10+

缺点 动画效果执行一次 滑到顶部再往下滑动就无效了 需要页面刷新了

使用方法：

1.引入animate.css

2.在最底部引用wow.js 并且初始化

<script type="text/javascript"> new WOW().init(); </script>

3.html中使用在类中加 wow 和 animate.css动画效果的类名即可

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

data-wow-duration：更改动画持续时间data-wow-delay：动画开始前的延迟data-wow-offset：开始动画的距离（与浏览器底部相关）data-wow-iteration：动画的次数重复（无限次：infinite）

配置

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

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

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