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

5 月 11, 2017 | | 0 條留言

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

配置

屬性/方法類型默認值說明
boxClass字符串‘wow’需要執行動畫的元素的class
animateClass字符串‘animated’animation.css 動畫的class
offset整數0距離可視區域多少開始執行動畫
mobile布爾值true是否在移動設備上執行動畫
live布爾值true異步加載的內容是否有效

DEMO 1 | DEMO 2 | 範例下載