AOS(Animate On Scroll) 套件使用

AOS 是一個簡單易用的 JavaScript 套件，讓開發者可以輕鬆地在網頁上製作出視差滾動動畫效果。使用 AOS 能夠提升網頁互動性，增強用戶體驗，常見於展示頁面、作品集網站...等。

AOS套件官網：https://michalsnik.github.io/aos/

一、AOS 安裝與設置

1. 引入 AOS 套件

使用 CDN 方式引入（建議簡單快速）：

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

透過 NPM 安裝（適用於專案管理）：

npm install aos --save

然後在 JavaScript 中引入：

import AOS from 'aos';
import 'aos/dist/aos.css';

2.初始化 AOS

• 在 HTML 文件的 <script> 標籤中加入以下程式碼，或在 JavaScript 檔案中使用：

AOS.init();

可以在 AOS.init() 中自定義參數，如下：

AOS.init({
  offset: 120,  // 觸發動畫的偏移量
  delay: 0,     // 動畫延遲時間（毫秒）
  duration: 400, // 動畫持續時間
  easing: 'ease', // 動畫的緩動效果
  once: true,   // 是否僅播放一次
});

二、AOS 動畫效果說明

AOS 提供多種動態效果，可直接通過 data-aos 屬性設定應用於元素。常用效果如下：

• **fade**：

淡入淡出 <div data-aos="fade">內容</div>

• **zoom-in 和 `zoom-out`****：

縮放效果 <div data-aos="zoom-in">內容</div>

• **slide-up / slide-down / slide-left / slide-right**：

滑動效果 <div data-aos="slide-up">內容</div>

• **flip-left / flip-right / flip-up / flip-down**：

翻轉效果 <div data-aos="flip-left">內容</div>

四、注意事項

1. 滾動性能：若動畫效果過多或頁面元素密集，可能會影響滾動效能，建議只針對重點元素使用。
2. 兼容性問題：AOS 預設支援現代瀏覽器，但某些動畫在老舊瀏覽器上可能表現不佳，需進行測試。
3. 無障礙設計：確保動態內容不影響頁面可讀性，必要時可為非必要動畫提供停用選項。

五、實際應用案例與網站

Codepen Examples

• Different built-in animations
• With anchor setting in use
• With anchor-placement and different easings
• With simple custom animations

資料來源：AOS官網、chatGPT、michalsnik