對於最後一個穩定版本 (v2)，請前往此處
為了更好地理解它的實際運作原理，我鼓勵您查看我關於 CSS-tricks 的文章。
在<head>中加入樣式：
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " />在關閉</body>標籤之前新增腳本，並初始化 AOS：
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script >安裝aos套件：
yarn add aos@nextnpm install --save aos@next匯入腳本、樣式並初始化 AOS：
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;為了使其工作，您必須確保您的建置過程已配置樣式載入器，並將其全部正確捆綁。但是，如果您使用的是 Parcel，它將按提供的方式開箱即用。
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
disable : false , // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent : 'DOMContentLoaded' , // name of the event dispatched on the document, that AOS should initialize on
initClassName : 'aos-init' , // class applied after initialization
animatedClassName : 'aos-animate' , // class applied on animation
useClassNames : false , // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver : false , // disables automatic mutations' detections (advanced)
debounceDelay : 50 , // the delay on debounce used while resizing window (advanced)
throttleDelay : 99 , // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // values from 0 to 3000, with step 50ms
easing : 'ease' , // default easing for AOS animations
once : false , // whether animation should happen only once - while scrolling down
mirror : false , // whether elements should animate out while scrolling past them
anchorPlacement : 'top-bottom' , // defines which position of the element regarding to window should trigger the animation
} ) ;data-aos屬性設定動畫： < div data-aos =" fade-in " > </ div >並使用data-aos-*屬性調整行為：
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >查看所有動畫、緩動和錨點位置的完整列表
還有一個只能在每個元素的基礎上使用的設定：
data-aos-anchor - 其偏移量將用於觸發動畫而不是實際動畫的元素。範例：
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >透過這種方式，您可以在滾動到另一個元素時觸發一個元素上的動畫 - 這對於為固定元素設定動畫非常有用。
AOS物件被公開為全域變量，目前有三種方法可用：
init初始化AOSrefresh - 重新計算元素的所有偏移量和位置（在視窗調整大小時呼叫）refreshHard - 使用 AOS 元素重新初始化陣列並觸發refresh （在與aos元素相關的 DOM 變更時呼叫）執行範例：
AOS . refresh ( ) ;預設情況下，AOS 會監視 DOM 更改，如果有非同步載入任何新元素，或從 DOM 中刪除某些內容，它會自動呼叫refreshHard 。在不支援MutationObserver例如 IE）的瀏覽器中，您可能需要自行呼叫AOS.refreshHard() 。
refresh方法在視窗調整大小等時調用，因為它不需要使用 AOS 元素構建新存儲，並且應該盡可能輕。
每當任何元素動畫進入或退出時，AOS 都會在文件上調度兩個事件： aos:in和aos:out ，以便您可以在 JS 中執行額外的操作：
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ;您也可以透過設定data-aos-id屬性來告訴 AOS 在特定元素上觸發自訂事件：
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >然後您將能夠監聽兩個自訂事件：
aos:in:super-duperaos:out:super-duper有時內建動畫還不夠。假設您需要一個盒子根據解析度具有不同的動畫。您可以這樣做：
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}然後在 HTML 中使用它：
< div data-aos =" new-animation " > </ div >該元素只會在行動裝置上設定不透明度動畫，但從 768px 寬度開始，它也會從右向左滑動。
與動畫類似，您可以新增自訂緩動：
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}內建動畫的預設距離為 100 像素。只要您使用 SCSS，您就可以覆蓋它：
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ;但是，您必須配置建置過程以允許它預先從node_modules匯入樣式。
使用animatedClassName更改AOS 的預設行為，以在捲動時套用放置在data-aos內的類別名稱。
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ;上面的元素將獲得兩個類別： animated和fadeInUp 。使用上述三個設定的不同組合，您應該能夠整合任何外部 CSS 動畫庫。
然而，外部庫不太關心實際動畫之前的動畫狀態。因此，如果您希望這些元素在滾動之前不可見，您可能需要添加類似的樣式：
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration 、 delay持續時間和延遲接受從 50 到 3000 的值，步長為 50 毫秒，這是因為它們是由 css 處理的，並且為了不使 css 比它已經長，我只實現了一個子集。我相信這些應該涵蓋大多數情況。
如果沒有，您可以編寫簡單的 CSS 來新增另一個持續時間，例如：
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
}此程式碼將添加 4000 毫秒的持續時間，供您在 AOS 元素上設置，或在初始化 AOS 腳本時設置為全域持續時間。請注意，雙[data-aos][data-aos] - 這不是一個錯誤，而是一個技巧，使單一設定比全局設定更重要，而無需在那裡寫醜陋的「！重要」:)
用法範例：
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > 淡入淡出動畫：
翻轉動畫：
幻燈片動畫：
縮放動畫：
如果您發現錯誤、有疑問或想法，請查看 AOS 貢獻指南，並隨時建立新問題。
