Animate.css是個動畫CSS library，不過主要是專注在處理動畫的部分，並不負責在網頁上該什麼時機呈現動畫，加上WOW.js，如捲軸頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。如果你希望你的頁面也更加有趣，那麼你可以試試WOW.js。
WOW.js依賴animate.css，所以它支持animate.css多達60多種的動畫效果，能滿足您的各種需求。
瀏覽器兼容
IE6、IE7 等老舊瀏覽器不支持CSS3 動畫，所以沒有效果；而wow.js 也使用了querySelectorAll 方法，IE 低版本會報錯。為了達到更好的兼容，最好加一個瀏覽器及版本判斷。
開始使用WOW.js
引入文件
css
js
HTML
代表就是我會呈現出bounce動畫效果喔！
詳細動畫效果請至animate.css查找，所以它支持animate.css多達60多種的動畫效果。
可以加入data-wow-duration（動畫持續時間）和data-wow-delay（動畫延遲時間）屬性，如：
Javascript
要使用WOW.js非常簡單，載入相關的程式碼後，加上一行程式碼就完成了！
new WOW().init();預設要使用WOW.js就是這麼簡單，以下如果需要自定義配置，可如下使用WOW.js可以設定的參數
var wow = new WOW(
{
boxClass: 'wow', // 要套用WOW.js縮需要的動畫class(預設是wow)
animateClass: 'animated', // 要"動起來"的動畫(預設是animated, 因此如果你有其他動畫library要使用也可以在這裡調整)
offset: 0, // 距離顯示多遠開始顯示動畫 (預設是0, 因此捲動到顯示時才出現動畫)
mobile: true, // 手機上是否要套用動畫 (預設是true)
live: true, // 非同步產生的內容是否也要套用 (預設是true, 非常適合搭配SPA)
callback: function(box) {
// 當每個要開始時, 呼叫這裡面的內容, 參數是要開始進行動畫特效的element DOM
},
scrollContainer: null // 可以設定成只套用在某個container中捲動才呈現, 不設定就是整個視窗
}
);
wow.init();
配置
| 屬性/方法 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| boxClass | 字符串 | ‘wow’ | 需要執行動畫的元素的class |
| animateClass | 字符串 | ‘animated’ | animation.css 動畫的class |
| offset | 整數 | 0 | 距離可視區域多少開始執行動畫 |
| mobile | 布爾值 | true | 是否在移動設備上執行動畫 |
| live | 布爾值 | true | 異步加載的內容是否有效 |