插件描述：aos.js是一款效果超贊的頁面滾動元素動畫動畫庫插件。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種效果。在頁面往回滾動時，元素會恢復到原來的狀態。簡要教程aos.js是一款效果超贊的頁面滾動元素動畫動畫庫插件。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種效果。在頁面往回滾動時，元素會恢復到原來的狀態。安裝可以通過bower來安裝aos動畫庫插件。bower aos --save使用方法在頁面中引入aos.css文件,和aos.js文件css" />[][][][]HTML結構要使用aos動畫庫，你需要做的就是在需要動畫的元素上添加aos屬性，例如：aos腳本將會在頁面滾動時，在該元素上觸發相應的動畫。在元素上還可以添加以下一些屬性：屬性 屬性 屬性 默認值aos- 是立刻觸發動畫還是在指定時間之后觸發動畫 200 - 動畫持續時間 600 - 動畫的動畫效果 ease-in-sine -delay 動畫的延遲時間 300 0aos- 錨元素。
使用它的偏移來取代實際元素的偏移來觸發動畫 # -- 錨位置頁面加載中的動態效果，觸發動畫時元素位于屏幕的位置 top- top--once 動畫是否只會觸發一次，或者每次上下滾動都會觸發 true false注意，aos-的動畫持續時間的范圍從50-3000毫秒，如果你想設置更大的值，可以在頁面中添加下面的CSS代碼：body[aos-='4000'] [aos], [aos][aos][aos-='4000']{ -: ;}上面的代碼將動畫的持續時間修改為4000毫秒。示例代碼：如果你擔心HTML5校驗的問題，可以為上面的屬性添加data-前綴。全局配置如果你不想單獨每個元素做一個動畫配置頁面加載中的動態效果，你可以通過init()方法來統一配置所有元素的動畫效果。AOS.init({ : 200, : 600, : 'ease-in-sine', delay: 100,});額外配置AOS提供了2個額外的配置方法，這些方法只能夠在初始化時使用。
配置 描述 示例值 默認值 AOS被禁用的條件 AOS被初始化的事件名稱 禁用AOS：如果你項在小屏幕設備中禁用AOS，可以：AOS.init({ : ''});你可以傳入3種設備的類型：、phone或。你也可以設置自己的禁用條件，例如在屏幕小于1024像素時禁用AOS：: . < 1024或者傳入一個函數，返回true或false。: () {var = 1024; . < ;}開始動畫的事件：如果你不想滾動動畫從頁面加載（）后就開始執行，可以使用來設置自己的事件，AOS會在上監聽這個事件：AOS.init({ : ''});對象有2個可用的方法：.();上面的代碼會重新計算元素的位置和偏移。
動畫和錨位置動畫淡入淡出動畫：fade-----up--up--down--down-left翻轉動畫：flip----right滑動動畫：slide----right縮放動畫：zoom--in--in--in--in---out--out--out--out-right錨位置top---------動畫你可以使用以下的一些動畫效果：---in--in--out--in-out--in--out--in-out--in--out--in-out--in--out--in-out--in--out--in-out-quart
