AOS 基本使用方法 (javascript 捲軸動畫)

Nov 18, 2020 by Hsiangming Lo

AOS 讓你的網頁只需加入一些簡單的語法 ，就能根據目前頁面捲動到的位置對元素執行指定的動畫。

加入 AOS 的 js 和 css。

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

在元素中加入 data-aos=“fade-up”, data-aos=“fade-down” …等屬性。

<div data-aos="fade-up"></div>
<div data-aos="fade-down"></div>
<div data-aos="fade-right"></div>
<div data-aos="fade-left"></div>

在元素後面加入 script，讓程式開始動作。

<script>
  AOS.init();
</script>

更多 AOS 使用方法與參數可參考： AOS