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

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

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

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

AOS.jsとは

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

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

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

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

AOS.jsの使い方

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

１．プラグインを読み込む

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

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

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

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

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

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

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

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

次に、設定したファイルを読み込むための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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AOSのオプションについて

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

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

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

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

AOSのオプション１　offset

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

offset:100

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

AOSのオプション２　delay

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

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

delay: 200

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

AOSのオプション３　duration

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

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

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

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

AOSのオプション４　easing

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

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

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

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

ease-out

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

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

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

AOSのオプション５　anchorPlacement

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

以下の表にまとめます。

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

AOSのオプション６　once

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

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

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

まとめ

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

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