爆好用的 AOS 滾動動畫函式庫(Animate on scroll library)

細節細節細節,有些網頁之所以高質感,就是贏在細節!

就連網頁向下滾動時,也要有點動畫點綴,網頁就會質感 up up ! 最近的 side project 需要一些前端包裝,所以觀摩一下別人怎麼做出美美的網頁,就被我發現 AOS 這套 Animate on scroll library, live demo 可以參考下方連結,點進去後就可以看到動畫效果:

Live demo ➡️ https://codepen.io/michalsnik/pen/WxNdvq

AOS 使用方法也很簡單,只要在 element 上設定 data-* 相關屬性就可以了,例如:

<div class="item" data-aos="fade-up">1</div>

其他詳見 https://github.com/michalsnik/aos/tree/v2

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!