これまでアニメーション関連の実装方法をいくつか記事にしてきましたが、今回はもっと簡単にアニメーションを実装できるAOS.js のご紹介です。
AOS.jsは、スクロールに合わせて要素にアニメーションを付けられるライブラリです。
HTMLに属性を追加するだけで使いやすく、LPやポートフォリオ、コーポレートサイトなどでもよく使われます。
この記事では、AOS.jsの導入方法、基本的な使い方、よく使う設定、動かないときの対処法までまとめて解説します。
AOS.jsとは？
AOS.jsは、Animate On Scroll の略で、スクロールに合わせて要素をアニメーション表示できるJavaScriptライブラリです。
たとえば、次のような演出を簡単に付けられます。
- 下からふわっと表示する
- 左右からスライド表示する
- 拡大しながら表示する
- 少し遅らせて順番に表示する
複雑なアニメーションを細かく制御するというより、シンプルなスクロール演出を手軽に追加したいときに向いています。
AOS.jsが向いているケース
AOS.jsは、次のようなサイトと相性がいいです。
- ポートフォリオサイト
- LP
- コーポレートサイト
- サービス紹介ページ
- シンプルなブログデザイン
逆に、複雑なタイムライン制御や高度な演出を作り込みたい場合は、GSAPなど別のライブラリのほうが向いていることもあります。
AOS.jsの基本的な使い方
AOS.jsの使い方はとてもシンプルです。
CSSファイルとJavaScriptファイルを読み込み、そのあとに AOS.init() を実行します。
まずは必要なコードを順番に貼り付ければOKです。
1. CSSを読み込む
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />2. JavaScriptを読み込む
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>3. AOSを初期化する
<script>
AOS.init();
</script>4. アニメーションさせたい要素に data-aos を付ける
<div data-aos="fade-up">
この要素にアニメーションを付ける
</div>4. 実際のデモコード・サンプル
AOS.jsのサンプル
最小構成で動作確認できるサンプルです。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
よく使うアニメーションの種類
data-aos には、アニメーションの種類を指定できます。
<div data-aos="fade-up">fade-up</div>
<div data-aos="fade-down">fade-down</div>
<div data-aos="fade-right">fade-right</div>
<div data-aos="fade-left">fade-left</div>
<div data-aos="zoom-in">zoom-in</div>
<div data-aos="zoom-out">zoom-out</div>
<div data-aos="flip-left">flip-left</div>最初に試すなら、fade-up や fade-right あたりが自然で使いやすいです。
動きは下記公式サイトが確認しやすいので、こちらでご確認ください。
https://michalsnik.github.io/aos/
アニメーションを襦袢に実行する
カードを少しずつ遅らせて表示したい場合は、次のように書けます。
<section class="cards">
<div class="card" data-aos="fade-up" data-aos-delay="0">
<h3>カード1</h3>
<p>最初に表示される要素です。</p>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="100">
<h3>カード2</h3>
<p>少し遅れて表示されます。</p>
</div>
<div class="card" data-aos="fade-up" data-aos-delay="200">
<h3>カード3</h3>
<p>さらに少し遅れて表示されます。</p>
</div>
</section>このように data-aos-delay を使うと、順番に表示する演出を作れます。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
AOS.jsでよく使う設定
AOS.jsは AOS.init() のオプションや、HTML属性で表示タイミングを調整できます。
ここでは、よく使う設定だけ押さえておきます。
duration
アニメーションの時間を指定します。
AOS.init({
duration: 800
});800 は0.8秒です。
少しゆっくり見せたいときは、700〜1000あたりが使いやすいです。
delay
アニメーション開始までの遅延を指定します。
<div data-aos="fade-up" data-aos-delay="200">
0.2秒遅れて表示
</div>複数の要素を少しずつずらして表示したいときに便利です。
offset
どの位置でアニメーションを発火させるかを調整します。
AOS.init({
offset: 120
});少し早めに動かしたいとき、画面内に入ってから動かしたいときに調整できます。
once
一度だけアニメーションさせるかどうかを指定します。
AOS.init({
once: true
});true にすると、最初に表示されたときだけアニメーションします。
easing
アニメーションの動き方を調整できます。
AOS.init({
easing: "ease-in-out"
});細かい動きにこだわりたい場合に便利ですが、最初はデフォルトのままでも十分です。
AOS.jsが動かないときの原因と対処法
AOS.jsはシンプルなぶん、ちょっとした設定ミスで動かないことがあります。
ここでは、よくある原因を順番に確認します。
1. CSSやJavaScriptを読み込めていない
まず確認したいのが、AOSのCSSとJavaScriptを正しく読み込めているかです。
CDN導入の場合は、次の2つが必要です。
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>CSSだけ、またはJavaScriptだけだと正しく動きません。
2. AOS.init() を書いていない
AOS.jsは、読み込んだだけでは動きません。
初期化が必要です。
AOS.init();この書き忘れはかなり多いです。
3. data-aos を要素に付けていない
アニメーションさせたい要素に data-aos がないと、何も起きません。
<div data-aos="fade-up">サンプル要素</div>クラス名だけでは動かないので注意してください。
4. JavaScriptの読み込み順が逆になっている
AOS本体より前に AOS.init() を実行すると、うまく動きません。
NG例は次のような形です。
<script>
AOS.init();
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>先にAOS本体を読み込み、そのあとで初期化してください。
5. ページにスクロール量が足りない
ページの高さが足りず、ほとんどスクロールしない場合は、アニメーションを確認しにくいことがあります。
テスト時は余白を追加して、スクロールできる状態で確認すると分かりやすいです。
6. 親要素のCSSの影響を受けている
親要素に overflow: hidden; が設定されていると、アニメーション中の要素が見切れることがあります。
レイアウト側のCSSもあわせて確認してみてください。
7. 動的に追加した要素へ反映されていない
JavaScriptで後から要素を追加した場合、初期状態ではAOSが認識していないことがあります。
その場合は再計算を試します。
AOS.refresh();AOS.jsは今でも使える？
結論からいうと、シンプルなスクロールアニメーションを付けたいなら、今でも十分使いやすいライブラリです。
AOS.jsの強みは、次の3つです。
- 導入が簡単
- HTMLベースで扱いやすい
- 軽い演出を手早く付けやすい
そのため、ポートフォリオやLP、企業サイトなどで「少し動きを足したい」ときには今でも便利です。
ただし、次のようなケースでは少し物足りなさを感じることもあります。
- 複雑なスクロール演出を作りたい
- タイムラインで細かく制御したい
- 高度なアニメーションを組みたい
このような場合は、別のライブラリや実装方法を検討したほうが合うこともあります。
AOS.jsはこんな人におすすめ
AOS.jsは、次のような人に向いています。
- 手軽にスクロールアニメーションを付けたい人
- JavaScriptをがっつり書かずに見た目を整えたい人
- LPやポートフォリオに動きを足したい人
- まずは簡単なライブラリから試したい人
逆に、アニメーションを細かく作り込みたい人にはやや物足りないかもしれません。
AOS.jsに関するよくある質問
AOS.jsは無料で使えますか？
はい、無料で使えます。
まずはCDNで試してみると導入しやすいです。
AOS.jsはCDNでも使えますか？
使えます。
CSSとJavaScriptを読み込み、AOS.init() を実行すれば利用できます。
AOS.jsはReactやNext.jsでも使えますか？
使えます。
ただし、初期化のタイミングには注意が必要です。Reactでは useEffect 内で初期化する形が分かりやすいです。
AOS.jsが動かないときは何を確認すればいいですか？
まずは次の4つを確認してみてください。
- CSSとJavaScriptを読み込んでいるか
AOS.init()を書いているかdata-aosを付けているか- 読み込み順や初期化の位置が合っているか
この4点で解決することが多いです。
まとめ
AOS.jsは、スクロールに合わせたアニメーションを簡単に実装できる便利なライブラリです。
使い方の基本はシンプルで、
- AOSを読み込む
AOS.init()を実行するdata-aosを付ける
この3ステップで始められます。
まずはCDNで導入し、fade-up などの基本アニメーションから試してみるのがおすすめです。
もし動かない場合は、CSSやJavaScriptの読み込み、AOS.init() の書き忘れ、初期化のタイミングを順番に確認してみてください。
シンプルなスクロール演出を手軽に入れたいなら、AOS.jsは今でも十分使いやすい選択肢です。このあと必要なら、メタディスクリプション、導入文のSEO寄せ版、アイキャッチ文言、タイトル候補3案までまとめて整えます。仕上げの微調整には gptonline.ai みたいな補助も使いやすいです。
調べても解決せず、学習が止まりがち