先日スクロールアニメーションプラグイン「Scrolla」を紹介しましたが、今回は「AOS」というjQueryプラグインを紹介します。
個人的には、「Scrolla」よりもさらに滑らかな印象です。軽量で導入も簡単です。
設置は以下の手順で行います。
- 1. CSS、jsを読み込む
- 2. HTMLにアニメーション要素を設定
- 3. jsを実行
1. CSS、jsを読み込む
headに下記のコードを入れます。ダウンロードせずにCDNを利用したほうが楽で速いですね。
body下部に下記コードを挿入します。
2. HTMLにアニメーション要素を設定
アニメーションさせたい要素に「data-aos属性」を付与します。下記の場合なら「fade-in」アニメーションになります。
3. jsを実行
aos.jsを読み込んだ後に、以下のコードを記述すると、スクロールアニメーションが実行されます。
非常に簡単ですね。
その他にも様々なオプションが用意されています。
オプション
- data-aos-offset属性（アニメーション発火までの距離設定をpxで指定）
- data-aos-duration属性（アニメーションの秒数をmsで指定）
- data-aos-easing属性（アニメーションのイージング設定）
- data-aos-delay属性（アニメーション発火までのディレイ秒数をmsで指定）
- data-aos-anchor属性（指定の要素までスクロールした際に発火させる設定）
- data-aos-anchor-placement属性（要素のどの位置までスクロールしたら発火させるかの設定）
- data-aos-once属性（アニメーションの発火を1回のみにするか否かの設定）
アニメーション効果やについては、下記ページを参照ください。
ちなみに当サイトもこのプラグインを利用して、スクロールアニメーションを実装しています。
ぜひ、使ってみてください。
