
所以早期梅干最常使用的就是waypoints再搭醜CSS3的動畫模組,就可讓滑鼠滾動頁面時,讓區塊一一的飛出來,相當的簡單且方便,但隨著waypoints的作者已很久沒更新,以至於目前不支援jQuery3.x以上的版本,因此梅干上網找了好久,終於找到一套不但簡單易用,且完全不用寫到任何的程式碼,甚至所有的參數設定,階可在html的標籤中完成,因此想要讓網頁動起來的朋友,現在也一塊來看看AOS這套件吧!
AOS
Step1
首先進到AOS外掛的網頁時,分別將CSS與JS載入到網頁後,再加入AOS.init();來將它啟用。

Step2
接著再html的標籤中,加入要呈現的特效屬性後,當頁面滾動到區塊時,區塊就會向上淡出,而在AOS的官網中,有更詳盡的效果展示,因此想知道更多效果,可直接到官網中查看。

Step3
除了新增動態效果以外,甚至還可設定動畫的持續時間,因此下回想要讓網頁動起來,AOS這套件絕不容錯過喔!
