最簡單的 Scroll 頁面動畫:AOS-Animate on Scroll library

對很多偏視覺導向的網頁設計師來說,編寫原始碼是一個相對可怕的事情,特別是你要在網頁上呈現一些動畫以增加畫面互動時的趣味時,往往很多時候都需要求助前端工程師。但由於台灣淺碟型的市場,公司裡的分工不一定那麼清楚,有時也不會有專職的前端工程師,這時如果你能花點時間去熟悉一些常用的 Library,就能能讓你在相對有限的資源去完成更多有趣的想法。

AOS 是一套用來做 Scroll 頁面動畫的 JS Labrary,不需要依賴其它 framework 就可以獨立運行,一般用在長卷軸的網頁,以增加畫面的趣味性,操作起來也非常簡單,下面是簡單的說明及教學。

  1. AOS 官網:https://michalsnik.github.io/aos/
  2. GitHub:https://github.com/michalsnik/aos
  3. 授權方式: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 本就是日常工作要接觸,端看你更習慣使用哪種方式即可。