網頁動畫效果WOW.js+animate.css頁面滾動更有趣

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動畫效果喔！
 代表就是我會呈現出slideInRight動畫效果喔！

詳細動畫效果請至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();

配置

DEMO 1 | DEMO 2 | 範例下載