網頁動畫效果WOW.js+animate.css

Animate.css是個動畫CSS library,不過主要是專注在處理動畫的部分,在網頁上該什麼時機呈現動畫,加上WOW.js,如捲軸滑到畫面才出現動畫效果。

開始使用WOW.js

要使用WOW.js非常簡單,載入相關的程式碼後,加上一行程式碼就完成了!

Javascript

new WOW().init();

HTML

<div class="wow bounce"> 我只有在出現時才會呈現特效喔! </div>

其他相關設定

預設要使用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 | 範例展示

 

Posted in Javascript

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses