WOW.js 的使用方法

WOW.js 是一个非常轻量级的动画效果插件，使用它可以组合多种炫酷的效果。

使用WOW.js可以实现我们在网站上常看到的，页面滚动到指定区域时就显示动画的效果。

1、要使用WOW.js必须引入：WOW.js 、animate.css，文件请自行百度下载。

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>

 

2、给要进行动画的元素加上相应的属性，以配置动画效果：

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

属性说明：

a) class 必须含有 wow 类

b) class 需要含有animate.css 中的动画效果类，animate.css效果样式见：http://www.jq22.com/yanshi819

c) 属性： data-wow-duration   动画持续时间

d) 属性：data-wow-delay        动画延迟执行时间，比如过5秒后在执行动画

e) 属性：data-wow-offset       元素的位置露出后距离底部多少像素执行（比如，我想让该内容显示100像素的时候，才执行动画）

f) 属性：data-wow-iteration   动画执行的次数

 

3、加载JS代码：

 

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ //不在ie6-9中使用
    new WOW().init();
};