aos.js是一款效果超讚的頁面滾動元素動畫jQuery動畫庫外掛。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種easing效果。在頁面往回滾動時，元素會恢復到原來的狀態。

載入方法：

<link rel="stylesheet" href="/dist/aos.css" />
<script src="/dist/aos.js"></script>
<script>
  AOS.init();
</script>

（JS、CSS檔案載入路徑自己調配，每個人情況不同。）

元素上可以新增以下屬性：（這裡以DIV為例）

*注意，aos-duration的動畫持續時間的範圍從50-3000毫秒，如果你想設定更大的值，可以在頁面中新增下面的CSS程式碼

body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
    transition-duration: 4000ms;
}

上面的程式碼將動畫的持續時間修改為4000毫秒。

資料 AOS 錨的位置，你可以為每一個元素設定不同的配置選項，原理很簡單，每個錨放置的選項包含兩個位置，即頂和中心。這意味著，動畫將被觸發時，頂部的元素將達到中心的視窗。底部頂部意味著動畫將被觸發時，底部的一個元素到達頂部的視窗，等等。下面你可以找到所有的錨定位置選項列表。

動畫：

淡入淡出動畫:
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

翻轉動畫:
flip-up
flip-down
flip-left
flip-right

滑動動畫:
slide-up
slide-down
slide-left
slide-right

縮放動畫:
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

錨位置:
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

easing動畫:

你可以使用以下的一些easing動畫效果:

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

一些樣例程式碼：

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">

<div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">

<div data-aos="fade-up" data-aos-anchor-placement="top-center">

AOS物件為一個全域性變數，有很多種核心API可以使用。這裡不多敘述，有需要的朋友去下面官方github或其他部落格查詢。

附：官方AOS Github（點選跳轉） 所需下載檔案、demo作者也打包在內.