簡介

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

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

瀏覽器相容

IE10+	Chrome	Firefox	Opera	Safari

IE6、IE7 等老舊瀏覽器不支援 CSS3 動畫，所以沒有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本會報錯。為了達到更好的相容，最好加一個瀏覽器及版本判斷。

使用方法

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();

配置