來點動態和互動，讓網頁動次動 #1 - 視差滾動與 AOS 套件

一個超簡單就能達到滾動視差的套件 AOS

安裝 AOS

一、載入 CDN

AOS 有提供 npm, yarn, bower 和 CDN 安裝，此處先以 CDN 為主，需要同時載入 CSS 和 JS檔案

• 引入 CSS：加入在 HTML 的 head 標籤裡面，但必須放在自定義的 CSS 前方

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

• 引入 JS：加入在 HTML 的 body 標籤裡的最後方，但必須放在自定義的 JS 檔案前方

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

二、在 JS 檔案中初始化 AOS

AOS.init();

基本使用方式

僅使用 AOS 預設動畫，只需要將 AOS 定義好的屬性和對應的值加入到 HTML 文件中，以下是常見的 AOS 屬性名稱：

• data-aos：AOS 動畫名稱，可以到官方網站看看套用後的效果
• data-aos-easing：速度曲線
• data-aos-duration：動畫執行時間，預設值為 1000 毫秒，可寫入值為 50 毫秒 ～ 3000 毫秒（1 秒等於 1000 毫秒），若要想要更多秒數可以透過 CSS 寫入，詳見官方說明
• data-aos-delay：動畫延遲執行的時間
• data-aos-offset：偏移量，預設為 100px，如果設為 0 元素就不會偏移
• data-aos-anchor-placement：觸發動畫的錨點位置

<div data-aos="fade-down"
     data-aos-easing="linear"
     data-aos-duration="1500">
</div>

更多 data-aos、data-aos-easing 和 data-aos-anchor-placement 所對應的屬性值可以查看官方文件

AOS 加入自定義設定

一、自定義綁定觸發動畫的元素

• data-aos-anchor：指定好觸發對象後，可以透過此屬性將觸發對象綁定在被觸發對象上

<div>1</div>
<div>2</div>
<div id="cat">3</div> //碰到此元素時會觸發底下的 #cat 元素
<div>4</div>
<div>5</div>

//被觸發對象，透過 data-aos-anchor 綁定
<div ​data-aos-anchor="#cat">
 <img src="cat.jpg" alt="cat">
</div>

二、自定義動畫到 AOS 中

主要透過 CSS 改變

• [data-aos: name]：自定義的 AOS 名稱，可以寫入元素尚未加入動態前的狀態
• .aos-animate：元素加入動畫後的最終狀態

一開始看官方文件我也很疑惑 .aos-animate 這個 class 到底哪來的，後來在範例網頁中打開開發者工具，才發現是元素套用 AOS 後，會在觸發時動態新增上去的 class

今天就介紹到這邊，大家可以試試看為自己的網頁加入動態哦～

參考資料

• AOS 官方 GitHub
• AOS 官方網站