最簡單的 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 本就是日常工作要接觸，端看你更習慣使用哪種方式即可。