這次來推薦AOS，裡面已經設定好大量滾動效果且簡易使用。

https://michalsnik.github.io/aos/
近到他們官網時就可以看到各種範例，點進github之後有安裝教學，可以使用cdn載入，也可以使用npm install。

呼叫AOS的方式


參數說明

• offset: 80 // 以像素(px)為單位，水平移動
• delay: 0, //延遲時間，範圍：0~ 3000
• duration: 400, //動畫時間，範圍：0~ 3000
• easing: ‘ease’, // 動畫速率效果
• once: false, // 是否重複觸發動畫
• mirror: false, // 是否超過滾動範圍時，做移出的動畫效果
• anchorPlacement: ‘top-bottom’, // 滾動方向觸發動畫，預設由上到下
   

(更多詳細數據請到官網查詢)

你也可以直接在html上定義AOS以及其他設定

像是這樣，可以直接寫在html裡面操作你想增加動畫效果的element。
是不是非常簡單又好用啊，這次分享給大家，希望對大家有幫助。