對很多偏視覺導向的網頁設計師來說,編寫原始碼是一個相對可怕的事情,特別是你要在網頁上呈現一些動畫以增加畫面互動時的趣味時,往往很多時候都需要求助前端工程師。但由於台灣淺碟型的市場,公司裡的分工不一定那麼清楚,有時也不會有專職的前端工程師,這時如果你能花點時間去熟悉一些常用的 Library,就能能讓你在相對有限的資源去完成更多有趣的想法。
AOS 是一套用來做 Scroll 頁面動畫的 JS Labrary,不需要依賴其它 framework 就可以獨立運行,一般用在長卷軸的網頁,以增加畫面的趣味性,操作起來也非常簡單,下面是簡單的說明及教學。
- AOS 官網:https://michalsnik.github.io/aos/
- GitHub:https://github.com/michalsnik/aos
- 授權方式:MIT
步驟一:引用 CSS 樣式
將下面的內容放到 head 的標籤裡
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
步驟二:載入 AOS library 及初始化
將下面的內容放到 </body> 的標籤前
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
步驟三:設定預設的動畫效果
AOS library 預設多種動畫效果,像是淡入淡出、翻頁、放大、縮小等等,只需要在 data-aos 輸入相關的參數即可,更多的預設效果也可以到 AOS 的官網或 GitHub 的頁面查詢,方式如下
<div data-aos="fade-right">從左邊滑入</div>
<div data-aos="flip-left">翻面的效果</div>
<div data-aos="zoom-in">放大</div>
<div data-aos="fade-up" data-aos-duration="3000">延遲3000微秒</div>
以上就完成一個最基礎的 Scroll 動畫。
一些常用的進階設定
AOS 提供兩種方式調整參數,一種是透過 data-aos-*,如果你比較熟悉 HTML&CSS 的話,建議採用這個方式來設定。
<div
data-aos=" fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</ div >
另一種則是在 AOS Library 初始化的時候設定相關的參數,需要你對 JS 有一些基礎的認識,方式如下:
AOS.init({
// Global settings:
disable: false,
startEvent: 'DOMContentLoaded',
initClassName: 'aos-init',
animatedClassName: 'aos-animate',
useClassNames: false,
disableMutationObserver: false,
debounceDelay: 50,
throttleDelay: 99,
// 透過 data-aos 來設定相關元素
offset: 120, // 移動距離 (單位為像素)
delay: 0, // 延遲時間,範圍從 0-3000
duration: 400, // 完成動畫所需的時間,範圍從 0-3000
easing: 'ease', // 動畫曲線
once: false, // 動畫是否只跑一次
mirror: false,
anchorPlacement: 'top-bottom', // 動畫觸發的位置
});
你會發現兩者設定的內容非常相似,透過 AOS.init() 的方式原始碼會比較乾淨,較適合前端工程師。使用 data-aos-* 則對視覺設計出身的人會比較親切,畢竟 HTML&CSS 本就是日常工作要接觸,端看你更習慣使用哪種方式即可。