aos.js超讚頁面滾動元素動畫jQuery動畫庫

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

簡要教程

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


AOS


AOS.js 下載          案例演示

安裝

可以通過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是立刻觸發動畫還是在指定時間之後觸發動畫200120
aos-duration動畫持續時間600400
aos-easing動畫的easing動畫效果ease-in-sineease
aos-delay動畫的延遲時間3000
aos-anchor錨元素。使用它的偏移來取代實際元素的偏移來觸發動畫#selectornull
aos-anchor-placement錨位置,觸發動畫時元素位於屏幕的位置top-centertop-bottom
aos-once動畫是否只會觸發一次,或者每次上下滾動都會觸發truefalse

注意,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個額外的配置方法,這些方法只能夠在初始化時使用。

配置描述示例值默認值
disableAOS被禁用的條件mobilefalse
startEventAOS被初始化的事件名稱exampleEventDOMContentLoaded

禁用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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章