転載：aos.js要素jQueryのアニメーションアニメーションライブラリ

：より転載https://www.cnblogs.com/aliyue/p/6742717.html

説明をプラグ：aos.jsが 効果素子アニメーションアニメーションライブラリのjQueryプラグインをスクロール素晴らしいページです。アニメーションライブラリは、28種類のアニメーション効果の要素、およびページがスクロールされたときに効果を緩和する様々なを提供することができます。ページが逆方向にスクロールすると、要素は元の状態に復元されます。

簡単なチュートリアル

aos.js効果は素晴らしいページスクロールアニメーション要素ライブラリjQueryのアニメーションプラグインです。アニメーションライブラリは、28種類のアニメーション効果の要素、およびページがスクロールされたときに効果を緩和する様々なを提供することができます。ページが逆方向にスクロールすると、要素は元の状態に復元されます。

AOS.jsダウンロード ケース発表

インストール

AOSアニメーションライブラリは、プラグイン亭を介してインストールすることができます。

亭は、AOS --saveをインストール

使用

aos.cssファイル、ページファイルでjQueryとaos.jsの導入

<リンクのrel = "スタイルシート" のhref = "DIST / aos.css" /> 
<スクリプトSRC = "JS / jquery.min.js"> </ SCRIPT> 
<スクリプトSRC = "DIST / aos.js"> </ SCRIPT>

HTML構造

AOSアニメーションライブラリを使用するには、次のようなアニメーション要素の必要性にAOSプロパティを追加されて実行する必要があります。

<DIV AOS = "animation_name">

ページには、その要素にアニメーションをトリガスクロールしますAOSスクリプト。

要素では、あなたはまた、次の属性の一部を追加することができます。

プロパティ	プロパティ	プロパティ	デフォルト値
オフセットへ	アニメーションは、直ちにまたは指定した時間のアニメーショントリガ後にトリガされます	200	120
所要時間	アニメーションの継続時間	600	400
緩和へ	アニメーションアニメーションを緩和	使いやすさにサイン	楽
遅延へ	ディレイタイムアニメーション	300	0
アンカーへ	アンカー要素。アニメーション要素をトリガするために実際のオフセットオフセットを交換するために使用されます	＃セレクタ	ヌル
アンカー配置に	アンカー位置、画面位置のトリガーアニメーション要素	トップセンター	上下
アットワンス	アニメーションは一度だけトリガー、または上にスクロールするかどうかと毎回トリガダウン	真	偽

あなたはより大きな値を設定したい場合は50から3000ミリ秒からアニメーションAOS-期間の継続時間の範囲は、あなたがページに次のCSSコードを追加することもできます。

身体[オン持続時間= '4000'] [上]、[へ] [へ] [オン持続時間= '4000'] {   
    遷移期間：4000ms。 
}

アニメーションの上記のコードの持続時間は、4000ミリ秒に変更されます。

サンプルコード：

<DIV AOS = "フェードイン、ズーム・イン" AOS-オフセット= "200" AOS-緩和= "緩和・イン・サイン" AOS-期間= "600"> 
<DIV AOS = "フリップ左" AOS-遅延= "100" AOS-アンカー= "例えば、セレクタ"> 
<DIV AOS = "フェードアップ" AOS-アンカー配置= "トップセンター">

あなたはHTML5の検証を心配している場合は、上記の特性とデータ - 接頭辞を追加することができます。

<DIVデータAOS = "animation_name" = "200" データAOS-緩和= "緩和・イン・サイン" をデータAOSはオフセット>

グローバルコンフィギュレーション

あなたが個別に構成されている各要素のアニメーションを行うにはしたくない場合は、init（）メソッドによって、すべての要素を統一するためにアニメーションを設定することができます。

AOS.init（{   
    オフセット：200、   
    期間：600、   
    緩和：「使いやすさにサイン」、   
    遅延：100、 
}）;

追加装備

AOSは、初期化時に使用できる2つの追加の構成方法を提供します。

コンフィギュレーション	説明	サンプル値	デフォルト値
無効にします	AOS無効状態	モバイル	偽
startEvent	AOSは初期化されたイベント名です	exampleEvent	DOMContentLoaded

AOSを無効にします。

あなたは小さな画面のデバイスでAOS項目を無効にした場合、次のことができます。

AOS.init（{   
    無効：「モバイル」 
}）;

携帯電話、またはタブレット：あなたは、デバイスの3種類の型を渡すことができます。

あなたはまた、画面が未満1024個のピクセルのときAOSが無効になっているなど、独自の無効化条件を設定することができます。

無効：window.innerWidth <1024

あるいは、trueまたはfalseを返す関数を渡します。

無効：関数（）{
    VARのmaxWidth = 1024;
    window.innerWidth <maxWidthにを返します。
}

アニメーションイベントを起動します。

あなたがページから実行開始後（DOMContentLoaded）ロードされている映画をスクロールしたくない場合は、独自のイベントを設定するためにstartEventを使用することができ、AOSは、ドキュメント上でこのイベントを監視します。

AOS.init（{
  startEvent： 'someCoolEvent'
}）;

API

AOSオブジェクトは、利用可能な2つのメソッドがあります。

初期化
リフレッシュ

AOS.refresh（）;

上記のコードは、オフセットと要素の位置を再計算します。

アニメーションとアンカーの位置

アニメーション

フェードアニメーション：

フェードアップ
フェードダウン
フェード左
フェードイン右
フェードアップ - 右
フェードアップ、左
フェードダウン、右
フェードダウン、左

フリップアニメーション：

フリップアップ
フリップダウン
フリップ左
フリップ - 右

スライドのアニメーション：

上にスライドします
スライドダウン
スライド左
スライド右

ズームアニメーション：

ズームイン
ズームアップアップ
ズームアップ・ダウン
ズーム・イン・左
ズーム・イン・右
ズームアウトする
ズームアウトアップ
ズームアウトダウン
ズームアウト、左
ズームアウト、右

アンカー位置

上下
トップセンター
トップトップ
中央下
センター、センター
センタートップ
底下
ボトムセンター
ボトムトップ

アニメーションを緩和

あなたは、次のいくつかの緩和のアニメーションを使用することができます。

線形
楽
使いやすさで
簡単にアウト
使いやすさにアウト
使いやすさにバック
簡単にアウトバック
安心・イン・アウトバック
使いやすさにサイン
簡単にアウトサイン
安心・イン・アウトサイン
使いやすさで、クワッド
簡単にアウトクワッド
安心・イン・アウト、クワッド
使いやすさで、キュービック
楽アウト立方
使いやすさにアウト立方
使いやすさで、クォート
簡単にアウトクォート
安心・イン・アウト・クォート