Tim Chen 已發佈 2019-11-21

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

前言

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

延伸閱讀

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

不用擔心!

呷藥愛配溫開水,使用 Animate.css 愛配 WOW.js。

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

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

WOW.js🔗


效果展示🔗

images


實作

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

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

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

JavaScript

new WOW().init();

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

HTML

<div><img src="https://upload.cc/i1/2019/11/20/iBj2Tn.png"></div>
<div><img src="https://upload.cc/i1/2019/11/20/qjDM9B.png"></div>
<div><img src="https://upload.cc/i1/2019/11/20/m96fkK.png"></div>
<div><img src="https://upload.cc/i1/2019/11/20/qwASWf.png"></div>
<div><img src="https://upload.cc/i1/2019/11/20/kiLTqC.png"></div>

CSS

div{
  width: 100vw;
  height: 100vh;
}
img{
  display: block;
  margin: 10vh auto;
}

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

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

HTML

<div class="wow flash"><img src="https://upload.cc/i1/2019/11/20/iBj2Tn.png"></div>
<div class="wow flipInX"><img src="https://upload.cc/i1/2019/11/20/qjDM9B.png"></div>
<div class="wow hinge"><img src="https://upload.cc/i1/2019/11/20/m96fkK.png"></div>
<div class="wow rollIn"><img src="https://upload.cc/i1/2019/11/20/qwASWf.png"></div>
<div class="wow fadeInUp"><img src="https://upload.cc/i1/2019/11/20/kiLTqC.png"></div>

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

images

效果展示🔗


後記

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

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

Discipline is the bridge between goals and accomplishment.

images

關於筆者

暱稱:Tim Chen

介紹:Medium:https://medium.com/@timchen0607

文章列表 文章列表