aos js
前端工程

網頁滾動元素動畫 AOS.js

圖片來源,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 是建議可以考慮使用,而且常常使用。加一些簡單的元素浮出的效果,可以讓你的網頁比較生動,看起來也會比較有現代感。

相關文章:
全屏滾動網頁 fullPage.js
如何利用 gulp 自動添加 JS 及 CSS 版號 (auto-versioning),避免瀏覽器快取

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。