插件描述：aos.js是一款效果超讚的頁面滾動元素動畫jQuery動畫庫插件。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種easing效果。在頁面往回滾動時，元素會恢復到原來的狀態。
簡要教程
aos.js是一款效果超讚的頁面滾動元素動畫jQuery動畫庫插件。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種easing效果。在頁面往回滾動時，元素會恢復到原來的狀態。
安裝
可以通過bower來安裝aos動畫庫插件。
bower install aos --save
使用方法
在頁面中引入aos.css文件,jquery和aos.js文件
<link rel="stylesheet" href="dist/aos.css" /> <script src="js/jquery.min.js"></script> <script src="dist/aos.js"></script>
HTML結構
要使用aos動畫庫，你需要做的就是在需要動畫的元素上添加aos屬性，例如：
<div aos="animation_name">
aos腳本將會在頁面滾動時，在該元素上觸發相應的動畫。
在元素上還可以添加以下一些屬性：
| 屬性 | 屬性 | 屬性 | 默認值 |
| aos-offset | 是立刻觸發動畫還是在指定時間之後觸發動畫 | 200 | 120 |
| aos-duration | 動畫持續時間 | 600 | 400 |
| aos-easing | 動畫的easing動畫效果 | ease-in-sine | ease |
| aos-delay | 動畫的延遲時間 | 300 | 0 |
| aos-anchor | 錨元素。使用它的偏移來取代實際元素的偏移來觸發動畫 | #selector | null |
| aos-anchor-placement | 錨位置，觸發動畫時元素位於屏幕的位置 | top-center | top-bottom |
| aos-once | 動畫是否只會觸發一次，或者每次上下滾動都會觸發 | true | false |
注意，aos-duration的動畫持續時間的範圍從50-3000毫秒，如果你想設置更大的值，可以在頁面中添加下面的CSS代碼：
body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{
transition-duration: 4000ms;
}上面的代碼將動畫的持續時間修改爲4000毫秒。
示例代碼：
<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600"> <div aos="flip-left" aos-delay="100" aos-anchor=".example-selector"> <div aos="fade-up" aos-anchor-placement="top-center">
如果你擔心HTML5校驗的問題，可以爲上面的屬性添加data-前綴。
<div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine">
全局配置
如果你不想單獨每個元素做一個動畫配置，你可以通過init()方法來統一配置所有元素的動畫效果。
AOS.init({
offset: 200,
duration: 600,
easing: 'ease-in-sine',
delay: 100,
});額外配置
AOS提供了2個額外的配置方法，這些方法只能夠在初始化時使用。
| 配置 | 描述 | 示例值 | 默認值 |
| disable | AOS被禁用的條件 | mobile | false |
| startEvent | AOS被初始化的事件名稱 | exampleEvent | DOMContentLoaded |
禁用AOS：
如果你項在小屏幕設備中禁用AOS，可以：
AOS.init({
disable: 'mobile'
});你可以傳入3種設備的類型：mobile、phone或tablet。
你也可以設置自己的禁用條件，例如在屏幕小於1024像素時禁用AOS：
disable: window.innerWidth < 1024
或者傳入一個函數，返回true或false。
disable: function () {
var maxWidth = 1024;
return window.innerWidth < maxWidth;
}開始動畫的事件：
如果你不想滾動動畫從頁面加載（DOMContentLoaded）後就開始執行，可以使用startEvent來設置自己的事件，AOS會在document上監聽這個事件：
AOS.init({
startEvent: 'someCoolEvent'
});API
AOS對象有2個可用的方法：
init
refresh
AOS.refresh();
上面的代碼會重新計算元素的位置和偏移。
動畫和錨位置
動畫
淡入淡出動畫：
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