當我們做好一個靜態網站後，可以幫網站內容做一點動畫效果，讓網站看起來更活潑，吸引使用者的眼球，
今天要來介紹一個好用的動畫套件 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

設定完後就大功告成啦！是不是很快速上手呢 😄，一起試試看吧！

參考文獻

AOS
AOS github

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

AOS捲動動畫-三分鐘教學快速上手(Animate On Scroll )