1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. AOS 免寫程式!載入套件滾動頁面,讓你的網頁動起來

AOS 免寫程式!載入套件滾動頁面,讓你的網頁動起來

2022/11/09

梅問題-AOS 免寫程式!載入套件滾動頁面,讓你的網頁動起來
  現在製作網頁幾乎都以手機優先,最主要的原因就在於,現在人滑手機的時間比用電腦還長, 甚至搭車、等人就會滑滑手機來打發時間,但也礙於手機只有點擊效果,因此有很多特效就無法呈現,因此滾動區塊一一的呈現出來,這無論是手機、平板還是電腦,都可一同呈現。

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


AOS
Step1
首先進到AOS外掛的網頁時,分別將CSSJS載入到網頁後,再加入AOS.init();來將它啟用。
梅問題-AOS 免寫程式!載入套件滾動頁面,讓你的網頁動起來
Step2
接著再html的標籤中,加入要呈現的特效屬性後,當頁面滾動到區塊時,區塊就會向上淡出,而在AOS的官網中,有更詳盡的效果展示,因此想知道更多效果,可直接到官網中查看。
梅問題-AOS 免寫程式!載入套件滾動頁面,讓你的網頁動起來
Step3
除了新增動態效果以外,甚至還可設定動畫的持續時間,因此下回想要讓網頁動起來,AOS這套件絕不容錯過喔!
梅問題-AOS 免寫程式!載入套件滾動頁面,讓你的網頁動起來