當我們做好一個靜態網站後，可以幫網站內容做一點動畫效果，讓網站看起來更活潑，吸引使用者的眼球，
今天要來介紹一個好用的動畫套件 AOS（Animate On Scroll），只要幾行程式碼就能輕鬆在網頁捲動時添加動畫效果，這邊會用 VUE 專案來做示範

安裝 AOS

1	npm install aos --save

引用 AOS

直接在 App.vue 引入 AOS，使所有組件都可以使用
App.vue

1 2	import AOS from "aos"; import "aos/dist/aos.css";

設定 AOS 初始化

所有動畫如沒特別設定，都會依照 init 的參數出現
App.vue

import AOS from "aos";
import "aos/dist/aos.css";
import { onMounted } from "vue";

onMounted(() => {
  AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-in-sine',
    delay: 100,
  });
});

offset: 偏移量，指定捲動多少距離後觸發動畫效果
duration: 動畫的持續時間
easing: 指定動畫的緩動函數，用於控制動畫的速度變化
delay: 動畫啟動之前的延遲時間，以毫秒為單位
once: 是否只執行一次

加上動畫屬性

在指定的元素加上屬性，可設定動畫效果、動畫延遲、偏移量等等

<div data-aos="fade-up">
  Lala的前端大補帖
</div>

<div data-aos="fade-up" data-aos-delay="500">
  歡迎一起鑽研前端技術
</div>

Attribute	Description	Example value	Default value
data-aos-offset	偏移量	200	120
data-aos-duration	動畫的持續時間	600	400
data-aos-easing	控制動畫的速度變化	ease-in-sine	ease
data-aos-delay	動畫延遲時間	300	0
data-aos-anchor	指定動畫的錨點元素(參考點)	#selector	null
data-aos-anchor-placement	定義錨點元素的位置，這影響動畫的觸發	top-center	top-bottom
data-aos-once	動畫是否只觸發一次	true	false