零基礎(chǔ)玩轉(zhuǎn)滾動(dòng)動(dòng)畫庫AOS一份完整實(shí)戰(zhàn)指南讓網(wǎng)頁元素隨滾動(dòng)活起來【免費(fèi)下載鏈接】aosAnimate on scroll library項(xiàng)目地址: https://gitcode.com/gh_mirrors/ao/aosAOSAnimate on Scroll是一個(gè)輕量級(jí)滾動(dòng)動(dòng)畫庫它用最簡(jiǎn)單的 HTML 屬性就能讓網(wǎng)頁元素在滾動(dòng)時(shí)優(yōu)雅地淡入、滑動(dòng)、翻轉(zhuǎn)或縮放。本文將從零開始帶你把 AOS 滾動(dòng)動(dòng)畫完整落地到自己的頁面上。先聊個(gè)場(chǎng)景你的頁面為什么沒感覺打開一個(gè)產(chǎn)品官網(wǎng)內(nèi)容很全、配色也講究但就是少了點(diǎn)靈氣——所有區(qū)塊整整齊齊地?cái)[在屏幕上滾動(dòng)時(shí)毫無反饋像看一份靜態(tài)文檔。再看看那些讓人印象深刻的站點(diǎn)圖片是滑進(jìn)來的、標(biāo)題是逐字浮現(xiàn)的、卡片是旋轉(zhuǎn)落位的。用戶每滾動(dòng)一屏頁面就回應(yīng)一次瀏覽變成了一場(chǎng)有節(jié)奏的探索。這種體驗(yàn)差異靠的往往就是一個(gè)滾動(dòng)動(dòng)畫庫。而 AOS 正是這類工具里上手門檻最低、最不需要?jiǎng)幽X子的一個(gè)——核心原理簡(jiǎn)單到一句話就能講完。它到底是怎么工作的一場(chǎng)換裝游戲在深入用法之前先弄明白 AOS 的底層機(jī)制這對(duì)后面排查問題非常有幫助。AOS 本身不做動(dòng)畫它只負(fù)責(zé)一件事在合適的時(shí)機(jī)給元素切換 CSS 類名。具體來說頁面加載后AOS 掃描所有帶data-aos屬性的元素給它們打上aos-init類監(jiān)聽滾動(dòng)事件當(dāng)元素進(jìn)入設(shè)定的觸發(fā)區(qū)域時(shí)追加aos-animate類而淡入、位移、縮放這些視覺變化全部由預(yù)先寫好的 CSS 過渡規(guī)則transition 初始transform/opacity完成元素滾出區(qū)域后再移除aos-animate動(dòng)畫就會(huì)反向播放如果配置了mirror。所以你看到的所有效果本質(zhì)都是類名在[data-aos]和[data-aos].aos-animate兩個(gè)狀態(tài)之間切換。這一設(shè)計(jì)的最大好處是動(dòng)畫執(zhí)行完全交給瀏覽器 CSS 引擎性能開銷極小。核心 JS 邏輯集中在 src/js/aos.js滾動(dòng)判斷在 src/js/helpers/handleScroll.js樣式的默認(rèn)動(dòng)畫定義在 src/sass/_animations.scss整個(gè)依賴鏈非常干凈。開始前的準(zhǔn)備清單動(dòng)手之前確認(rèn)三樣?xùn)|西一個(gè)普通的 HTML 頁面不需要任何框架能聯(lián)網(wǎng)加載 CDN 資源或用 npm/yarn 管理依賴瀏覽器的滾動(dòng)事件正常這通常是當(dāng)然的。如果你想把項(xiàng)目源碼拉到本地研究可以 clonegit clone https://gitcode.com/gh_mirrors/ao/aos倉庫里demo/目錄放著多個(gè)可直接打開的演示頁面比如 demo/anchor.html 展示錨點(diǎn)動(dòng)畫、demo/offset.html 展示偏移量效果邊看代碼邊對(duì)照效果比看文檔理解得快得多。安裝方式兩條路任選方式一CDN 引入最快推薦先跑通在head里放樣式在/body前放腳本link relstylesheet hrefhttps://unpkg.com/aosnext/dist/aos.css / script srchttps://unpkg.com/aosnext/dist/aos.js/script方式二npm/yarn 安裝適合工程化項(xiàng)目npm install aosnext --save # 或者 yarn add aosnext然后在入口文件里導(dǎo)入并初始化import AOS from aos; import aos/dist/aos.css; AOS.init();核心操作三步讓元素動(dòng)起來第一步調(diào)用初始化AOS.init();就這樣默認(rèn)配置已經(jīng)可以工作。所有可調(diào)參數(shù)都有默認(rèn)值見 src/js/aos.js 里的options對(duì)象。第二步給元素打上動(dòng)畫標(biāo)記在需要?jiǎng)赢嫷脑厣蠈慸ata-aos屬性值就是動(dòng)畫名div>div >AOS.init({ once: true, mirror: false, disable: mobile });進(jìn)階玩法把 AOS 用出花樣1. 錨點(diǎn)觸發(fā)讓別的元素替它把關(guān)data-aos-anchor可以指定一個(gè)選擇器讓動(dòng)畫的觸發(fā)時(shí)機(jī)以那個(gè)元素的位置為準(zhǔn)。典型場(chǎng)景是固定懸浮的元素——它自己不動(dòng)但希望它隨頁面某個(gè)區(qū)塊的出現(xiàn)而出現(xiàn)div>document.addEventListener(aos:in, ({ detail }) { console.log(進(jìn)來了, detail); }); document.addEventListener(aos:out, ({ detail }) { console.log(出去了, detail); });還可以用data-aos-idxxx給單個(gè)元素綁定專屬事件名aos:in:xxx精確到人。4. 自定義動(dòng)畫內(nèi)置的不夠就自己造AOS 的類名機(jī)制決定了擴(kuò)展動(dòng)畫非常容易——你只需要模仿它的狀態(tài)切換寫一段 CSS[data-aoswiggle] { transform: rotate(-3deg); opacity: 0; transition-property: transform, opacity; } [data-aoswiggle].aos-animate { transform: rotate(0deg); opacity: 1; }然后在 HTML 里直接用data-aoswiggle即可。同理緩動(dòng)函數(shù)也能通過data-aos-easing擴(kuò)展具體寫法見 README 的 Recipes 一節(jié)。5. 對(duì)接 Animate.css 等第三方庫開啟useClassNames: true后data-aos的值會(huì)被直接當(dāng)作類名加到元素上配合animatedClassName就能無縫借用外部動(dòng)畫庫的類AOS.init({ useClassNames: true, animatedClassName: animated });div>AOS.init({ disable: function () { return window.innerWidth 600; } });優(yōu)先 transform/opacity這兩類屬性由 GPU 合成動(dòng)畫更順滑內(nèi)置動(dòng)畫也都是基于它們實(shí)現(xiàn)的。從用到懂源碼導(dǎo)讀如果想讓技術(shù)功底更進(jìn)一步AOS 的源碼結(jié)構(gòu)非常值得讀量小且模塊劃分清晰src/js/aos.js入口負(fù)責(zé)初始化、事件綁定、公開 APIinit/refresh/refreshHardsrc/js/helpers/elements.js收集所有[data-aos]元素src/js/helpers/prepare.js把全局配置與元素內(nèi)聯(lián)屬性合并并計(jì)算每個(gè)元素的入場(chǎng)/出場(chǎng)位置src/js/helpers/handleScroll.js滾動(dòng)時(shí)的類名切換核心src/sass/_core.scss時(shí)長(zhǎng)、延遲的 CSS 生成邏輯。讀完后你會(huì)發(fā)現(xiàn)整個(gè)庫的核心思想就是配置合并 位置計(jì)算 類名切換真正復(fù)雜的部分都被 CSS 過渡扛下來了。寫在最后給你的頁面來點(diǎn)活氣AOS 的價(jià)值不在于代碼有多玄妙而在于它把滾動(dòng)動(dòng)畫這件事的門檻降到了幾乎為零——不需要會(huì) JS 動(dòng)畫、不需要懂性能優(yōu)化寫幾個(gè)屬性就能獲得專業(yè)級(jí)的視覺效果。從今天起挑一個(gè)自己的頁面或小項(xiàng)目按本文的清單從安裝走到進(jìn)階再動(dòng)手寫一個(gè)自定義動(dòng)畫試試。當(dāng)頁面第一次隨著滾動(dòng)活起來的時(shí)候你會(huì)覺得這幾十分鐘花得太值了。倉庫里還有完整源碼、demo 和測(cè)試用例cypress/integration/ 里甚至有覆蓋各種配置的自動(dòng)化測(cè)試想深挖隨時(shí)歡迎。祝你玩得開心滾動(dòng)愉快【免費(fèi)下載鏈接】aosAnimate on scroll library項(xiàng)目地址: https://gitcode.com/gh_mirrors/ao/aos創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考