aos.js是一款效果超讚的頁面滾動元素動畫jquery動畫庫外掛程式。該動畫庫可以在頁面滾動時提供28種不同的元素動畫效果，以及多種easing效果。在頁面往回滾動時，元素會恢復到原來的狀態。
src="bower_components/aos/dist/aos.js">
script>
aos.init();
script>
data-aos="animation_name">下面是乙個所有可用的動畫列表:)
屬性描述
示例值預設值
data-aos-offset是立刻觸發動畫還是在指定時間之後觸發動畫
200120
data-aos-duration動畫持續時間
600400
data-aos-easing動畫的easing動畫效果
ease-in-sine
ease
data-aos-delay動畫的延遲時間
3000
data-aos-anchor錨元素。使用它的偏移來取代實際元素的偏移來觸發動畫
#selector
null
data-aos-anchor-placement錨位置，觸發動畫時元素位於螢幕的位置
top-center
top-bottom
data-aos-once動畫是否只會觸發一次，或者每次上下滾動都會觸發
true
false
*注意，aos-duration的動畫持續時間的範圍從50-3000毫秒，如果你想設定更大的值，可以在頁面中新增下面的css**
body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']資料 aos 錨的位置，你可以為每乙個元素設定不同的配置選項，原理很簡單，每個錨放置的選項包含兩個位置，即頂和中心。這意味著，動畫將被觸發時，頂部的元素將達到中心的視窗。底部頂部意味著動畫將被觸發時，底部的乙個元素到達頂部的視窗，等等。下面你可以找到所有的錨定位置選項列表。
data-aos="fade-zoom-in"
data-aos-offset="200"
data-aos-easing="ease-in-sine"
data-aos-duration="600">
data-aos="flip-left"
data-aos-delay="100"
data-aos-anchor=".example-selector">
data-aos="fade-up"
data-aos-anchor-placement="top-center">
舉個栗子:
aos
.refresh();
如果你不想單獨每個元素做乙個動畫配置，你可以通過init()方法來統一配置所有元素的動畫效果。
設定描述
示例值預設值
disableaos被禁用的條件
mobile
false
starteventaos被初始化的事件名稱
exampleevent
domcontentloaded
如果你想在小螢幕裝置中禁用aos，可以：
你也可以設定自己的禁用條件，例如在螢幕小於1024畫素時禁用aos：
disable: window.innerwidth < 1024disable: function ()翻轉動畫:
滑動動畫:
縮放動畫:
你可以使用以下的一些easing動畫效果:
頁面元素焦點滾動效果
scroll 此方案滾動效果很好，但在低端安卓 4.x 上有相容性問題,options不被識別，只識別true false scroll 方案a在安卓4.4.4機器上scrolltop 獲取的值總是0，導致焦點切換時頁面顯示不對，最終改為用非html body的根元素做基準，但效果略顯示卡頓，有時間...
Selenium 滾動頁面至元素可見
在自動化操作中，如果web頁面過長，而我們需要的元素並不在當前可視頁面中，那麼selenium就無法對其進行操作 此時，我們就需要像平時操作瀏覽器一樣來滾動頁面，使我們需要操作的物件可見！滾動頁面的方法 使用方式 示例 from selenium import webdriver import ti...
頁面滾動時，動態新增css動畫
在別人的 中，看到頁面滾動到某一位置時，該位置的元素通過各種炫酷的動畫展示出來。不知道他們是怎麼做的，我根據自己的理解做了乙個demo。原理很簡單，用css3預先定義元素的動畫效果，先不要新增到元素上。監聽window.onscroll的事件，獲取頁面滾動的高度，當這個元素顯示出來時，動態新增該元素...