Demo:使用wow.js快速打造捲動式動畫網頁

less than 1 minute read

我用兩個不同方法個別製作出網站來讓大家比較看看:

純CSS打造捲動式動畫網站 wow.js打造的捲動式動畫網站

接著來介紹這wowjs的製作方法與其優缺點。

使用方法:

第一步要做的是animate.css與wow.js載進網頁中。接著幫要使用動畫的部份加上.wow .animate動畫名稱屬性。wow.js用來負責偵測捲動到的位置,animate.css用來決定呈現的動畫。

HTML

  <section class="wow slideInLeft"></section>
  <section class="wow slideInRight"></section>

JavaScript

new WOW().init();

就是這麼簡單。還有其他客製化的設定,不過彈性也不大,使用最基本的功能cp值最高。

跟手工打造的CSS動畫的不同

  • wow.js + animate.css易於撰寫但彈性不大。
  • wow.js + animate.css 製作的動畫位置是預先設定好的。不能移動也不能重疊。
  • 使用純CSS需要撰寫兩份CSS,一份是改變前的狀態,一份是改變後的狀態。而使用 wow.js + animate.css 只需要撰寫結束後的狀態,只要在div加上.wow.slideInLeft等等的動畫名稱即可完成。撰寫的CSS少了許多。

結論

wow.js + animate.css 能夠打造的捲動式動畫角色很鮮明。但是彈性不大。如果要更加生動的畫面還是得自己設計CSS。

參考資料

Animate.css matthieua/WOW

Leave a Comment