有的頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。如果你希望你的頁面也更加有趣，那麼你可以試試 WOW.js。

WOW.js 依賴 animate.css，所以它支援 animate.css 多達 60 多種的動畫效果，能滿足您的各種需求。

特效演示網址：http://www.jq22.com/yanshi1705

類似特效：scrollReveal.js ——頁面滾動顯示動畫 JavaScript，不支援 IE6 - IE9

線上案例：

http://www.nmmts.com/list-37-1.html

http://www.nmmts.com/list-38-1.html

http://www.nmmts.com/list-39-1.html

使用方法

1、引入檔案

<link rel="stylesheet" href="css/animate.min.css">

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration（動畫持續時間）和 data-wow-delay（動畫延遲時間）屬性，如：

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

3、JavaScript

new WOW().init();

如果需要自定義配置，可如下使用：

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

配置