AOS.js（Animate On Scroll）は、ウェブページのスクロールに応じて要素をアニメーション表示するための軽量なJavaScriptライブラリです。このライブラリを使用すると、スクロールアニメーションを簡単に実装できます。AOS.jsは、インストールと使用が非常に簡単で、HTMLファイルにスクリプトとスタイルシートを読み込むだけで利用できます。また、多数のアニメーションオプションを提供しており、要素の表示・非表示のアニメーションを細かくカスタマイズできます。
アニメーションはスクロール位置に基づいて自動でトリガー(発火)されるため、ユーザーがページをスクロールするたびに新しいアニメーションが表示されます。AOS.jsはレスポンシブデザインをサポートしており、異なる画面サイズでも適切に動作します。基本的な使用方法としては、まずCDNからAOS.jsを読み込み、JavaScriptコードでAOSを初期化し、アニメーションを適用したいHTML要素にdata-aos属性を追加します。例えば、上方向にフェードインさせたい場合はdata-aos=”fade-up”、アニメーションの持続時間をミリ秒で指定したい場合はdata-aos-duration=”1000″のように記述します。このように、AOS.jsはユーザーエクスペリエンスを向上させるための簡単で効果的なツールです。
今回はAOS.jsをCDNで読み込む方法や、モジュールバンドラを使用した設定。また、カスタマイズについて詳細を記述いたします。参考にしていただければ幸いです。
読者AOS.jsの使い方は、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、AOS.jsの使い方｜CDN・Viteでスクロールアニメーションを実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
公式リンク
https://michalsnik.github.io/aos
GitHub
https://github.com/michalsnik/aos
特徴
- 実装が簡単で、HTMLタグにdata属性を付与するだけでアニメーションが発火します。
- 属性の変更でアニメーションが実装できる。クラス名の変更は必要がない。
- カスタマイズが可能で、柔軟に対応できます。
- スクロールイベントが自動で発火するため、アニメーションのコントロールがスムーズに行えます。
- スクロールイベントの実装は簡単で、難しい設定は必要ありません。
- 様々なオプションが用意されており、実装の幅が広がります。
コード
コードでは、AOS.jsの使い方｜CDN・Viteでスクロールアニメーションを実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
CDNで読み込む方法
初期設定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>aos.cssの読み込み
headタグ内に以下を配置します。
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />aos.jsの読み込み
bodyの閉じタグの直前に以下のscriptを配置します。
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>パッケージマネージャーの使用
モジュールバンドラにはViteを使用しています。
npm i aosimport AOS from "aos";
import "aos/dist/aos.css";
document.addEventListener("DOMContentLoaded", () => {
AOS.init({
duration: 800, // アニメーションの持続時間
once: true, // アニメーションを一度だけ実行
});
});参考までに、当方の環境ではDOMContentLoadedイベントで実装したところうまく機能しました。
コードの補足
コードの補足では、前の章に続く項目を整理します。各項目の役割と違いを確認しながら、必要な部分を自分の制作へ取り入れてください。
アニメーションの実装
deta属性
以下のようにこコードを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
.box {
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="box" data-aos="fade-up"></div><!-- /.box -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
実装アニメーション
fade-up
<div class="box" data-aos="fade-up"></div><!-- /.box -->アニメションの種類
アニメションの種類では、AOS.jsの使い方｜CDN・Viteでスクロールアニメーションを実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
フェード アニメーション
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
フリップ アニメーション
- flip-up
- flip-down
- flip-left
- flip-right
サイド アニメーション
- slide-up
- slide-down
- slide-left
- slide-right
ズーム アニメーション
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
オプションの設定
AOS.init()内に以下のように設定が可能です。ここで設定した内容は全てのアニメーションに適応されます。
// オプションの設定オブジェクトも渡すことができます
// 以下はデフォルト設定
AOS.init({
// グローバル設定:
disable: false, // 以下の値を受け付けます: 'phone', 'tablet', 'mobile', boolean, 式または関数
startEvent: 'DOMContentLoaded', // ドキュメント上で発火するイベントの名前、これによりAOSが初期化されます
initClassName: 'aos-init', // 初期化後に適用されるクラス
animatedClassName: 'aos-animate', // アニメーションに適用されるクラス
useClassNames: false, // trueの場合、スクロール時に`data-aos`の内容をクラスとして追加します
disableMutationObserver: false, // 自動変異検出を無効にします（高度な設定）
debounceDelay: 50, // ウィンドウのリサイズ時に使用されるデバウンスの遅延（高度な設定）
throttleDelay: 99, // ページのスクロール時に使用されるスロットルの遅延（高度な設定）
// `data-aos-*`属性で要素ごとに上書き可能な設定:
offset: 120, // 元のトリガーポイントからのオフセット（px単位）
delay: 0, // 0から3000までの値、50ms単位
duration: 400, // 0から3000までの値、50ms単位
easing: 'ease', // AOSアニメーションのデフォルトのイージング
once: false, // アニメーションが一度だけ実行されるかどうか - 下にスクロールする間
mirror: false, // 要素がスクロールして過ぎ去った時にアニメーションが逆再生されるかどうか
anchorPlacement: 'top-bottom', // ウィンドウに対する要素の位置を定義して、アニメーションをトリガーします
});オプションの設定で押さえたいポイント
オプションの設定は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
オプションの設定の確認方法
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
カスタマイズ
カスタマイズでは、AOS.jsの使い方｜CDN・Viteでスクロールアニメーションを実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
コード
アニメーションのカスタマイズは以下のように設定します。
/* アニメーションの実装前 */
[data-aos="fade-left-custom"] {
transform: translateX(10px);
opacity: 0;
transition-property: transform, opacity;
}
/* アニメーション実装後 */
.aos-animate.fade-left-custom {
transform: translateY(0);
opacity: 1;
}解説
以下はfade-leftの横の移動を10pxにカスタムする例です。
data-aos="fade-left-custom"という属性を持つ要素に適用されます。「fade-left-custom」この名前は何でも良い。transform: translateX(10px);：この要素は、水平方向に10ピクセル右に移動します。opacity: 0;：要素は透明（見えない状態）です。transition-property: transform, opacity;：transformとopacityプロパティに対してトランジション（アニメーション）が適用されることを示しています。- .aos-animate.fade-left-customこのようにクラスをつなげることで、アニメーションが実装されます。
- スクロールイベントは変更しなくても良いため、簡単にカスタムすることができます。
まとめ
- アニメーションが簡単に実装できる
- スクロールイベント等、難しい設定は必要がない
- カスタマイズも容易にできる
- 様々なオプションも準備されている
- アニメーションの付与にはdata属性を使用する
スクロールアニメーションを簡単に試せました。スマホだけ動きを弱くしたい場合は、CSSではなくAOSのオプション側で調整する方がよいでしょうか？
端末幅によって動きを変える場合は、matchMedia()などで判定してAOSの設定やdata属性を切り替える方法が分かりやすいです。利用者の設定にも配慮するなら、prefers-reduced-motionではアニメーションを停止または最小限にする対応も加えるとよいです。
CDNとViteの両方が載っていて助かりました。動きを減らす設定を有効にしている利用者向けに、prefers-reduced-motionも合わせて確認した方がよさそうですね。
そのとおりです。prefers-reduced-motionを確認し、動きを停止または弱くすると利用者の設定を尊重できます。CSSのメディアクエリに加えて、必要であればJavaScript側でもmatchMedia()を使って初期化を分けると確実です。