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

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

加入 AOS 的 js 和 css。

{code}

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

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

{/code}

在元素中加入 data-aos="fade-up", data-aos="fade-down" ...等屬性。

{code}

<div data-aos="fade-up"></div>

<div data-aos="fade-down"></div>

<div data-aos="fade-right"></div>

<div data-aos="fade-left"></div>

{/code}

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

{code}

<script>

  AOS.init();

</script>

{/code}

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