AOS(aos.js)のオプションの使い方をご紹介!

AOS(aos.js)には多くのオプションが存在しており、色々工夫をすることができます。ではAOS(aos.js)のオプションの使い方をサンプルコード付きでご紹介します。

コンテンツ [表示]

  1. 1AOS(aos.js)のオプションで出来ること
  2. 2AOS(aos.js)のオプションの使い方
  3. 2.1主なオプションの種類
  4. 3まとめ

AOS(aos.js)のオプションで出来ること

AOS(aos.js)のオプションを設定することで、要素を表示させるタイミングや動かす距離、アンカーポイント、アニメーションの回数など変えることができます。

では以下の項目でAOS(aos.js)のオプションの使い方について見ていきましょう。

Photo byFree-Photos

AOS(aos.js)のオプションの使い方

まず始めにオプションを用いないシンプルなaos.jsのサンプルコードを用意したので、挙動を確認してみましょう。

aos.jsは何もオプションを付けずに呼び出した場合は上記のサンプルコードのプレビューのような動きとなります。

では次にオプションを用いた場合を紹介します。

AOS(aos.js)のオプションは以下の場所に記述します。

AOS(aos.js)のオプションの記述場所

AOS.init({
//オプションの記述場所
})

ではオプションを用いたサンプルコードを用意したので、挙動を確認してみましょう。

1つ目のサンプルコードと比べると少しゆっくりアニメーションされていることが分かります。

主なオプションの種類

では主に用いるオプションを紹介します。
 

aos.jsのオプション
offset アニメーションの開始位置の設定
duration どれくらい時間をかけてアニメーションさせるか
easing アニメーションの仕方
delay アニメーションを起動させるタイミングをどれほど遅延させるか
once アニメーションを1回だけ実行するかどうか
anchor アニメーションの開始位置を他の要素に指定する
anchor-placement アニメーションの開始するスクロールの位置を調整

これらオプションのデフォルト値、設定できる値、また他のオプションについては以下のサイトに載っているので参照してください。

aos.jsのオプション
aos.jsのオプションです。

まとめ

いかがでしたでしょうか?

aos.jsにはここで紹介したように多くのオプションがあり、アニメーションをカスタマイズすることができます。

ぜひ皆さんもオプションを用いて工夫してaos.jsを使ってみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。