豆知識・お役立ち情報

クリエイター・プログラマーを目指している人のためのメディアくりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア

2021.10.19更新

【初心者向け】AOS.jsの使い方をわかりやすく解説!

【初心者向け】AOS.jsの使い方をわかりやすく解説!

ホームページを見ていると、ユーザーのスクロールする動きに合わせて画像がフェードインしたり、スライドして表示されたりしたことはありませんか?

自分のサイトでも同じような表現ができると、なお魅力的にホームページを仕上げることができると思います!
でも難しい・・・?と思った方!!

実はAOS.jsを使うと、とても簡単に実装することができます。

AOS.jsとは

AOS.jsとは「Animation On Scroll library」の略称で、スクロールの動きに合わせてアニメーションを実装することができるプラグインです。

Javascriptで実装されていてjQueryには依存していませんので、jQueryを読み込む必要はありません!

またとっても軽いので、パフォーマンスも高いプラグインです。

使い方もとても簡単で、大きく3ステップのことをすればOK!!

AOS.jsの使い方

  1. プラグインを読み込む
  2. HTMLでアニメーションを設定したい要素に属性を追加する
  3. JavascriptでAOS.jsを動作させるためのプログラムを記述する(数行でOK)

1.プラグインを読み込む

まずは自分のサイトにAOS.jsを動かすために必要なプログラムを読み込みましょう!

プログラムを読み込む方法は大きく2つあります。

  • 必要のファイルをダウンロードして読み込む
  • CDNを利用する

必要なファイルをダウンロードして読み込む場合は、公式のサイトからダウンロードする必要があります。
以下のリンクから公式のサイトを開きましょう。
一番下までスクロールすると、ダウンロードのボタンがありますのでクリックします。

AOSの公式サイトはこちらから

aos-master.zipというファイルがダウンロードされますので、解凍した後、

  • aos-master/dist/aos.css
  • aos-master/dist/aos.js

2つのファイルを自分のサイトのフォルダにコピーします。

次に、設定したファイルを読み込むためのlinkタグとscriptタグの記述例を示します。
どちらも<head></head>の中に記述しましょう。

<!-- CSSを読み込む -->
<link rel="stylesheet" href="css/aos.css">

<!-- jsファイルを読み込む -->
<script src="js/aos.js"></script>

なお、この記述例は、aos.cssをcssフォルダに、aos.jsをjsフォルダに保存していること、cssフォルダとjsフォルダと同じフォルダの中に、記述するHTMLファイルが保存されていることを想定しています。
フォルダの構成が違う場合は、パスの記述を変えてください。

CDNを使ってプラグインを読み込む場合は、ファイルをダウンロードしなくて済むので簡単です。

CDNは、インターネット上で公開されている必要なファイルを、URLを指定して読み込んでいきます。
なので、ファイルのダウンロードは必要ありません。

URLについては、AOSの公式サイトに掲載されていますので、そちらをコピペして使いましょう!
もしかするとバージョンアップなどされているかもしれません。公式サイトで確認して使用しましょう!

<!-- CSSを読み込む -->
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <!-- jsファイルを読み込む -->
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

2.HTMLでアニメーションを設定したい要素に属性を追加する

1番目の手順で、自分のサイトないでAOS.jsを使用する準備が整いました。

ですがまだ、どの要素(タグ)に、どのようなアニメーションを設定するか?を記述していません。

この記述は簡単で、アニメーションを設定したい要素の属性に、アニメーションのタイプを設定すればOKです。

以下は記述例です。div要素の中のdata-aos属性に注目してください。

<div data-aos="fade-right">
    この文字がフェードインします!
</div>

data-aos属性に値を指定していますが、この値はAOSで決められた値です。
アニメーションの種類によって値が用意されています。

アニメーションは大きく4種類用意されています。

  • Fade フェードインします
  • Flip くるんと回転して表示します
  • Slide スライドしながら表示します
  • Zoom ズームします

また、この4種類のアニメーションもさらに細かく分類されます。

例えば、Slideのアニメーションなら、左からスライドする、右からスライドする、などスライドの種類が用意されているのです。

主な動きについてもAOS公式ページに紹介されていますので、確認してみてくださいね!

3.JavascriptでAOS.jsを動作させるためのプログラムを記述する

最後に、AOSを動作させるためのプログラムを記述します。

プログラムと聞くとぎょっ!とする方もいらっしゃるかもしれませんが、数行でOKです!

<script>
AOS.init();
</script>

最低限、これだけで動作します。AOSを動かしてね!というプログラムです。
ただし、このプログラムを記述する場所に気を付けます。
</body>の直前に記述しましょう。

AOSを動かすタイミングは、HTMLの内容をブラウザが把握した後にしてほしいからです。
プログラムは通常、上から順に読み進めていきますので、一番最後に記述してあげればOKです。

AOSのオプションについて

先ほどの3つの手順でAOSを動作させることは可能なのですが、
動かすタイミングだったり、
どのくらいの時間をかけてアニメーションさせるかなど、
オプション設定を行うことが可能です!

オプション設定の例を下に示します。

AOS.init({
offset: 100,
delay: 200,
duration: 500,
easing: 'ease-out',
anchorPlacement:'bottom-top',
once:false
});

先ほどの手順の3番目に記述したプログラムに設定内容を書き加えることによって、オプション設定が可能になります!

AOSのオプション1 offset

アニメーションが動作を始めるまでの距離です。
例えば、

offset:100

と記述すれば、アニメーションさせる要素が表示されて100pxスクロールしたら、アニメーションが始まります。

AOSのオプション2 delay

アニメーションを始めるまでの時間です。アニメーションを実行するまでの待機時間、と考えるとよいかもしれません。
offsetの距離に到達したあと、delayで設定された時間だけ待った後、アニメーションが開始されます。

なお、値はミリ秒単位で指定します。

delay: 200

の場合は、0.2秒待ってから開始されます。

AOSのオプション3 duration

どのくらいの時間をかけてアニメーションをさせるかです。

この時間を長くすればするほど、ゆっくりアニメーションが動きます。

長くしすぎると、ゆーーーっくり動いて退屈になってしまうかもしれません。
動きを見ながら調整しましょう!

delayと同様、durationについてもミリ秒で設定します。

AOSのオプション4 easing

イージングの種類を指定します。

イージングとは、アニメーションの動きの加速度を表します。
「最初はゆっくり、だけど最後は少し加速する」
「最初は早いけど、最後はゆっくりになる」
のような、動きに少し緩急をつけることができるのです。

イージングを設定することで、人はアニメーションを自然に感じることができるようになります。

イージングタイプはたくさん存在するのですが、

ease-out

を使用したほうがいいようです。
ease-inやease-in-outといった動きもあるのですが、そちらはどうもユーザーが「遅い!ゆっくりだ!」と感じがちなのだそうです。

他のイージングタイプがたくさんありますので、以下のサイトで確認してみてください!

jQuery Easing Plugin エフェクト一覧ページ

AOSのオプション5 anchorPlacement

これは、アニメーションさせる要素として指定した要素が、ウィンドウのどの位置に来たら動作させるか?といったことを細かく指定するためのオプションです。

以下の表にまとめます。

意味
top-bottom指定要素上部がウィンドウ下部へきたら開始
top-center指定要素上部がウィンドウ中央へきたら開始
top-top指定要素上部がウィンドウ上部へきたら開始
center-bottom指定要素中央がウィンドウ下部へきたら開始
center-center指定要素中央がウィンドウ中央へきたら開始
center-top指定要素中央がウィンドウ上部へきたら開始
bottom-bottom指定要素下部がウィンドウ下部へきたら開始
bottom-center指定要素下部がウィンドウ中央へきたら開始
bottom-top指定要素下部がウィンドウ上部へきたら開始

AOSのオプション6 once

アニメーションを1回だけにするか、何度も繰り返して行うか?を指定します。

値にtrueを指定すればアニメーションは1回だけ実行されますので、スクロールして要素が表示された後は、上下にスクロールを繰り返しても要素は表示されたままです。

値にfalseを指定すると、何度も繰り返しアニメーションが行われます。
一度下にスクロールしてアニメーションされた要素も、また画面を上部に戻してスクロールされると、またアニメーションが実行されます。

まとめ

以上がAOS.jsを利用するために必要な使い方です!
最低限必要な設定方法と、簡単にカスタマイズできるオプション設定についてお話しました。


実はAOS.jsは、CSSやjsを記述することによって、もっとカスタマイズすることが可能です!
自分なりにカスタマイズして、サイトが一番魅力的になるように工夫してみましょう。