您好,登錄后才能下訂單哦!
插件描述:aos.js是一款效果超贊的頁(yè)面滾動(dòng)元素動(dòng)畫(huà)jQuery動(dòng)畫(huà)庫(kù)插件。該動(dòng)畫(huà)庫(kù)可以在頁(yè)面滾動(dòng)時(shí)提供28種不同的元素動(dòng)畫(huà)效果,以及多種easing效果。在頁(yè)面往回滾動(dòng)時(shí),元素會(huì)恢復(fù)到原來(lái)的狀態(tài)。
aos.js是一款效果超贊的頁(yè)面滾動(dòng)元素動(dòng)畫(huà)jQuery動(dòng)畫(huà)庫(kù)插件。該動(dòng)畫(huà)庫(kù)可以在頁(yè)面滾動(dòng)時(shí)提供28種不同的元素動(dòng)畫(huà)效果,以及多種easing效果。在頁(yè)面往回滾動(dòng)時(shí),元素會(huì)恢復(fù)到原來(lái)的狀態(tài)。
AOS.js 下載 案例演示
可以通過(guò)bower來(lái)安裝aos動(dòng)畫(huà)庫(kù)插件。
bower install aos --save
在頁(yè)面中引入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>
要使用aos動(dòng)畫(huà)庫(kù),你需要做的就是在需要?jiǎng)赢?huà)的元素上添加aos屬性,例如:
<div aos="animation_name">
aos腳本將會(huì)在頁(yè)面滾動(dòng)時(shí),在該元素上觸發(fā)相應(yīng)的動(dòng)畫(huà)。
在元素上還可以添加以下一些屬性:
屬性 | 屬性 | 屬性 | 默認(rèn)值 |
aos-offset | 是立刻觸發(fā)動(dòng)畫(huà)還是在指定時(shí)間之后觸發(fā)動(dòng)畫(huà) | 200 | 120 |
aos-duration | 動(dòng)畫(huà)持續(xù)時(shí)間 | 600 | 400 |
aos-easing | 動(dòng)畫(huà)的easing動(dòng)畫(huà)效果 | ease-in-sine | ease |
aos-delay | 動(dòng)畫(huà)的延遲時(shí)間 | 300 | 0 |
aos-anchor | 錨元素。使用它的偏移來(lái)取代實(shí)際元素的偏移來(lái)觸發(fā)動(dòng)畫(huà) | #selector | null |
aos-anchor-placement | 錨位置,觸發(fā)動(dòng)畫(huà)時(shí)元素位于屏幕的位置 | top-center | top-bottom |
aos-once | 動(dòng)畫(huà)是否只會(huì)觸發(fā)一次,或者每次上下滾動(dòng)都會(huì)觸發(fā) | true | false |
注意,aos-duration的動(dòng)畫(huà)持續(xù)時(shí)間的范圍從50-3000毫秒,如果你想設(shè)置更大的值,可以在頁(yè)面中添加下面的CSS代碼:
body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{ transition-duration: 4000ms; }
上面的代碼將動(dòng)畫(huà)的持續(xù)時(shí)間修改為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">
如果你擔(dān)心HTML5校驗(yàn)的問(wèn)題,可以為上面的屬性添加data-前綴。
<div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine">
如果你不想單獨(dú)每個(gè)元素做一個(gè)動(dòng)畫(huà)配置,你可以通過(guò)init()方法來(lái)統(tǒng)一配置所有元素的動(dòng)畫(huà)效果。
AOS.init({ offset: 200, duration: 600, easing: 'ease-in-sine', delay: 100, });
AOS提供了2個(gè)額外的配置方法,這些方法只能夠在初始化時(shí)使用。
配置 | 描述 | 示例值 | 默認(rèn)值 |
disable | AOS被禁用的條件 | mobile | false |
startEvent | AOS被初始化的事件名稱(chēng) | exampleEvent | DOMContentLoaded |
禁用AOS:
如果你項(xiàng)在小屏幕設(shè)備中禁用AOS,可以:
AOS.init({ disable: 'mobile' });
你可以傳入3種設(shè)備的類(lèi)型:mobile、phone或tablet。
你也可以設(shè)置自己的禁用條件,例如在屏幕小于1024像素時(shí)禁用AOS:
disable: window.innerWidth < 1024
或者傳入一個(gè)函數(shù),返回true或false。
disable: function () { var maxWidth = 1024; return window.innerWidth < maxWidth; }
如果你不想滾動(dòng)動(dòng)畫(huà)從頁(yè)面加載(DOMContentLoaded)后就開(kāi)始執(zhí)行,可以使用startEvent來(lái)設(shè)置自己的事件,AOS會(huì)在document上監(jiān)聽(tīng)這個(gè)事件:
AOS.init({ startEvent: 'someCoolEvent' });
AOS對(duì)象有2個(gè)可用的方法:
init
refresh
AOS.refresh();
上面的代碼會(huì)重新計(jì)算元素的位置和偏移。
動(dòng)畫(huà)
淡入淡出動(dòng)畫(huà):
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
翻轉(zhuǎn)動(dòng)畫(huà):
flip-up
flip-down
flip-left
flip-right
滑動(dòng)動(dòng)畫(huà):
slide-up
slide-down
slide-left
slide-right
縮放動(dòng)畫(huà):
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動(dòng)畫(huà)
你可以使用以下的一些easing動(dòng)畫(huà)效果:
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
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。