都給我動起來! WOW.js 分享

前言

上次介紹了 Animate.css 來針對網頁內元素增添動態效果，可是我們有些動態效果在網頁的尾端，常常使用者還沒看到那邊動畫就跑完了，你的心血都白費了，怎麼辦?

都給我動起來! Animate.css 分享

不用擔心!
呷藥愛配溫開水，使用 Animate.css 愛配 WOW.js。

WOW.js 可以利用網頁滾動到元素位置時來觸發 Animate.css 的效果，如此一來就不會有使用者還沒看到，動畫就已經跑完的窘境囉。

必須要注意的一點是 WOW.js 的所有效果都是倚靠 Animate.css，千萬別只使用 WOW.js 然後問我說為什麼網頁不會動喔。

wow.js - Reveal Animations When Scrolling

效果展示

實作

第一步就是引入 Animate.css 與 WOW.js，程式碼如下。

函式庫引入完後，要啟用 WOW.js，在 Javascript 下新增如下程式碼即可。

接著新增幾個 div 區塊裡面放圖片，然後設定 div 的高度為 100% 的螢幕高度，以便我們檢視 WOW.js 的效果，程式碼如下。

至此，我們的前置作業就完成了。

再來，我們針對想要設定效果的區塊新增 class="wow" 與選擇想要的效果把它加入 class 例如 flash 等效果，程式碼如下。

Animate.css 可以設定延遲幾秒或是動畫執行的次數，WOW.js 也可以進行設定，但有點不一樣的是不是寫在 class 裡，而是要另外新增屬性，詳細資訊如下。

後記

WOW.js 的設定十分簡單，所以大家應該很快就可以上手，以上介紹的都是基礎的設定，如果有哪些地方想要自行設計可以參考它文件裡的說明，再自行調教。

謝謝各位看到這邊，也請各位看倌多多指教與交流。

Discipline is the bridge between goals and accomplishment.

Photo by Fabio Comparelli on Unsplash