JavaScript 系列 (1)：網頁捲動時的揭露動畫效果 WOW.js

EJ Feng

Jan 27, 2021

就是當網頁捲到那個區塊的時候，一個一個動畫才會執行。

wow.js - Reveal Animations When Scrolling

Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation settings: style, delay…

wowjs.uk

最近發現了這個簡單好用的前端動畫特效套件，從官網的動畫特效就可以看出來這個動畫是幹嘛的。也很常在其他網站上面看到這種動畫效果，感覺有點像 Landing Page 必備的套件了！

安裝到專案中

CSS 的部份

到 Animate.css 去下載安裝 animate.css 檔案後，href 連結指向 animate.css 檔案：

<link rel="stylesheet" href="css/animate.css">

JavaScript 的部份

到 WOW.js 的 GitHub 去下載安裝 wow.min.js 檔案後，src 連結指向 wow.min.js 檔案：

<script src="js/wow.min.js"></script>

然後在 JS 程式碼中用「new WOW().init();」這樣一行程式碼就可以啟用 wow.js 了：

<script>
   new WOW().init();
</script>

實際使用在網頁中

在要用動畫特效的 HTML element 上加上 CSS class「wow」，就可以先將該 HTML element 給隱藏起來，網頁捲動到該區塊才會揭露該 HTML element：

<div class="wow">
   Content to Reveal Here
</div>

然後再加上動畫的類型 class（可以到 Animate.css 找動畫類型 class），例如「fadeInUp」就是「向上淡入」的動畫類型，是很常見的效果：

<div class="wow fadeInUp">
   Content to Reveal Here
</div>

如果還想要讓動畫再慢一點執行，可以加上「data-wow-delay=”0.1s”」，這樣這個動畫會在網頁捲動到該區塊後 0.1 秒後才執行。這種適合在該區塊有很多個 item，想要讓每個 item 的動畫都有一點點時間差的漸層效果時使用：

<div class="wow fadeInUp" data-wow-delay="0.1s">
   Content to Reveal Here 1
</div><div class="wow fadeInUp" data-wow-delay="0.2s">
   Content to Reveal Here 2
</div><div class="wow fadeInUp" data-wow-delay="0.3s">
   Content to Reveal Here 3
</div>

WOW.js 好用推推！！