網頁滾動元素動畫 AOS.js

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

圖片來源，AOS 官網 https://michalsnik.github.io/aos/

現在很多網頁，像是手機產品的網頁，當使用者往下拉時，會有圖片或文案浮現的效果。要達成這樣的效果，可以考慮使用 AOS.js。以目前 (2020年6月) 來說，類似功能的插件，應該是以 AOS.js 為主。

安裝上很簡單，沒有相依的插件，將 html 加上 aos.css, aos.js 後，如下方初始化就可以使用

<script>
  AOS.init();
</script>

將你想要產生動畫的 html 元素加上 data-aos 屬性，例如

<div data-aos="fade-up"></div>

當網頁捲動到這個元素時，它就會有一個小小往上 fade in 的動畫。不一定要 “fade-up”，fade 系列如

<div data-aos="fade-down"></div>
<div data-aos="fade-left"></div>
<div data-aos="fade-up-left"></div>

以上沒有列出全部的 fade 語法，全部 fade 語法請參考 aos.js 官網。

元素翻轉系列

<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>
<div data-aos="flip-left"></div>

Zoom in zoom out 系列

<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>

Again，這邊沒有列出全部的語法，全部語法請參考 aos.js 官網。

另外還有一些其他的設定

data-aos-duration="3000" // 動畫的持續時間，default is 400ms
data-aos-easing="linear" // 動畫的速度曲線，default is ease
data-aos-offset="300" // 調整本來觸發點的offset(in px)，default is 120
data-aos-delay="300" // 動畫的延遲啟動時間，default is 0

另外可以調整該元素動畫在視窗的哪個位置被觸發

data-aos-anchor-placement="top-bottom" // default
data-aos-anchor-placement="center-bottom"
data-aos-anchor-placement="bottom-bottom"

“top-bottom” 指的是「該元素的頂端」在瀏覽器的下方，也就是剛剛要出現時，觸發動畫。”center-bottom” 指的是「該元素的中間」在瀏覽器的下方時，觸發動畫。”bottom-bottom” 指的是「該元素的底部」在瀏覽器的下方時，觸發動畫。所以一般從上往下捲動網頁時，該元素的出現快慢是 “top-bottom” > “center-bottom” > “bottom-bottom”。

anchor-placement 也可以是 “top-center” “center-center” “bottom-center”，理解方式如上一段。xxx-center 因為都是等該元素在瀏覽器的中間時，才觸發動畫。所以一般從上往下捲動網頁時，xxx-center 會比 xxx-bottom 「晚」觸發動畫。

實作時，可能要微調動畫觸發的時機，就可以使用 data-aos-anchor-placement 和上方提到的 data-aos-offset。

結論，aos.js 安裝、撰寫都簡單。如果是網頁設計師，或是前端工程師的讀者，larry 是建議可以考慮使用，而且常常使用。加一些簡單的元素浮出的效果，可以讓你的網頁比較生動，看起來也會比較有現代感。