[![WOW.js简单实现页面滚动动画效果](https://pic.salongweb.com/2016/03/wow-js.jpg)](https://pic.salongweb.com/2016/03/wow-js.jpg "WOW.js简单实现页面滚动动画效果")
在很多网页上，尤其是一些科技企业的产品展示页面，当你滚动页面的时候会看到各式各样的元素动画效果，非常的炫丽，很吸引人。WOW.js就是一款帮助你实现这种CSS3动画效果的javascript插件，不依赖jQuery，使用相当的简单方便，定制性强，可设计成自己喜欢的动画。

萨龙网络开发的主题与网站很多也都使用了WOW.js来实现页面滚动动画效果，所以来分享下使用心得。

### 下载WOW.js

前往GitHub进行下载：<https://github.com/matthieua/WOW>

### 安装WOW.js

**1、链接到CSS动画库**

在头部添加如下代码链接animate.css：

1. &lt;link rel=“stylesheet” href=“css/animate.css”&gt;

2、链接WOW.js

在页脚添加如下代码链接WOW.js：

1. &lt;script src=“js/wow.min.js”&gt;&lt;/script&gt;

3、激活WOW.js

1. &lt;script&gt;
2. var wow = new WOW({
3. boxClass: ‘wow’,
4. animateClass: ‘animated’,
5. offset: 50,
6. mobile: true,
7. live: true
8. });
9. wow.init();
10. &lt;/script&gt;

代码很好理解，这些元素都是默认的，后面的值是可以根据情况进行修改。offset后面的参数为元素出现在可视区域的范围，当内容在可视区超过50像素时再触发动画，在桌面时因为屏幕较大，所以这个值我们可以设置大些，不然内容都没有看到，动画已经执行了，在移动端就可以设置少些。

### 向HTML中添加标签

1. &lt;section class=“wow slideInLeft”&gt;&lt;/section&gt;
2. &lt;section class=“wow slideInRight”&gt;&lt;/section&gt;

wow是触发动画的元素，页面滚动出现在可视区时会向有wow元素再添加animated元素，动画是由slideInLeft与slideInRight等元素来生成，在animate.css动画库中有很多动画，可以通过演示来查看。

### 高级选项

1、改变动画时间data-wow-duration

1. &lt;section class=“wow slideInLeft” data-wow-duration=“2s”&gt;&lt;/section&gt;

2、动画延迟加载时间data-wow-delay

1. &lt;section class=“wow slideInLeft” data-wow-delay=“5s”&gt;&lt;/section&gt;

3、开始动画距离data-wow-offset

1. &lt;section class=“wow slideInLeft” data-wow-offset=“10”&gt;&lt;/section&gt;

4、动画重复的次数data-wow-iteration

1. &lt;section class=“wow slideInLeft” data-wow-iteration=“10”&gt;&lt;/section&gt;

在实际使用过程中，最多就是修改下动画的效果，默认的动画并不适合所有的页面，修改CSS动画也是非常简单的事情。
\[successbox\]让你的页面变的有动感，来使用WOW.js吧！\[/successbox\]\[scbutton link=”http://mynameismatthieu.com/WOW/” target=”blank” variation=”yellow”\]项目演示站点\[/scbutton\]\[scbutton link=”https://deephoto.salongweb.com” target=”blank” variation=”red”\]Deephoto主题动画演示\[/scbutton\]\[scbutton link=”http://siquan.salongweb.com/” target=”blank” variation=”blue”\]思泉科技官网动画演示\[/scbutton\]