# JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
aos.js とは
aos.js は、Animate On Scroll の略で、スクロール位置に応じて要素をアニメーションさせることができる便利なライブラリです。このライブラリを使うことで、サイトのユーザーエクスペリエンスを向上させることができます。
公式ドキュメント
AOS.js の公式ドキュメントには、AOS.js の基本的な使い方や設定方法、アニメーションの種類などが記載されています。
公式サイト（英語）: https://michalsnik.github.io/aos/
# aos.js をインストール
yarn add aos
npm install aos --save
CDN 使う場合
aos.js は CDN から読み込むことができます。以下のコードを head タグ内に記述してください。
<head>
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css"
/>
</head>
# aos.js 使い方
data-aos 属性を付与するだけでアニメーションができます。
<div data-aos="flip-up">アニメーション対象</div>
# data-aos アニメーションの属性値設定
aos.js は 4 タイプで 14 種類のアニメーションを用意しています。
タイプ
- Fade フェード表示
- Flip 回転表示
- Slide スライド表示
- Zoom ズーム表示
アニメーション一覧
Fade アニメーション
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
Flip アニメーション
- flip-up
- flip-down
- flip-left
- flip-right
Slide アニメーション
- slide-up
- slide-down
- slide-left
- slide-right
Zoom アニメーション
- 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
# その他の属性
data-aos-duration 属性でアニメーションの時間を指定することができます。
<div data-aos="fade-up" data-aos-duration="1000">アニメーション対象の要素</div>
# aos.js のデフォルト値
AOS.init({
// グローバル設定:
disable: false, // 以下の値を受け入れます: 'phone', 'tablet', 'mobile', boolean, expression または function
startEvent: "DOMContentLoaded", // AOSが初期化されるドキュメントで発行されるイベントの名前
initClassName: "aos-init", // 初期化後に適用されるクラス
animatedClassName: "aos-animate", // アニメーション適用時に適用されるクラス
useClassNames: false, // trueの場合、data-aosの内容をスクロール時のクラスとして追加する
disableMutationObserver: false, // 自動ミューテーション検出を無効にする（高度な設定）
debounceDelay: 50, // ウィンドウサイズをリサイズするときに使用されるdebounceの遅延時間（高度な設定）
throttleDelay: 99, // ページをスクロールするときに使用されるthrottleの遅延時間（高度な設定）
// data-aos-* 属性で個別に上書き可能な設定:
offset: 120, // オリジナルトリガーポイントからのオフセット（px）
delay: 0, // 0から3000までの値、50msステップ
duration: 400, // 0から3000までの値、50msステップ
easing: "ease", // AOSアニメーションのデフォルトイージング
once: false, // スクロールダウン時にアニメーションが1回だけ実行されるかどうか
mirror: false, // 要素がスクロールを超えたときにアニメーションが適用されるかどうか
anchorPlacement: "top-bottom", // ウィンドウに対する要素の位置を定義し、アニメーションをトリガーする
});
| 設定オプション | HTML data-aos-* 属性 | デフォルト | 説明 |
|---|---|---|---|
| disable | false | 'phone', 'tablet', 'mobile', boolean, expression または function | |
| startEvent | DOMContentLoaded | AOS が初期化されるドキュメントで発行されるイベントの名前 | |
| initClassName | aos-init | 初期化後に適用されるクラス | |
| animatedClassName | aos-animate | アニメーション適用時に適用されるクラス | |
| useClassNames | false | aos の内容をスクロール時のクラスとして追加する | |
| disableMutationObserver | false | 自動ミューテーション検出を無効にする（高度な設定） | |
| debounceDelay | 50 | ウィンドウサイズをリサイズするときに使用される debounce の遅延時間（高度な設定） | |
| throttleDelay | 99 | ページをスクロールするときに使用される throttle の遅延時間（高度な設定） | |
| offset | data-aos-offset | 120 | 発火までの距離 (px) |
| delay | data-aos-delay | 0 | 発火までの秒数 (ms) 0 から 3000 までの値、50ms ステップ |
| duration | data-aos-duration | 400 | アニメーション時間 (ms) 0 から 3000 までの値、50ms ステップ |
| easing | data-aos-easing | ease | AOS アニメーションのデフォルトイージング |
| once | data-aos-once | false | スクロールダウン時にアニメーションが 1 回だけ実行されるかどうか |
| mirror | data-aos-mirror | false | 要素がスクロールを超えたときにアニメーションが適用されるかどうか |
| anchorPlacement | data-aos-anchor-placement | top-bottom | 発火位置を細かく設定 ウィンドウに対する要素の位置を定義し、アニメーションをトリガーする |
# disable アニメーションを無効化
// スマートフォンとタブレットの場合アニメーションを無効
AOS.init({
disable: "mobile",
});
デバイスタイプ
- mobile スマートフォンとタブレット
- tablet タブレット
- phone スマートフォン
デバイス以外に、画面幅を指定し無効にすることも可能です。
AOS.init({
disable: function () {
// 横幅が1000pxより小さい環境ではアニメーションを無効
return window.innerWidth < 1000;
},
});
# data-aos HTML 属性
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
></div>
# data-aos-easing イージングタイプ一覧
イージングタイプを指定するためのオプション一覧です。
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
参考：jQuery Easing Plugin エフェクト一覧ページ (opens new window)
# data-aos-anchor-placement 発火位置設定
| 設定値一覧 | 発火位置 |
|---|---|
| top-bottom | 指定要素上部がウィンドウ下部へきたら発火 |
| top-center | 指定要素上部がウィンドウ中央へきたら発火 |
| top-top | 指定要素上部がウィンドウ上部へきたら発火 |
| center-bottom | 指定要素中央がウィンドウ下部へきたら発火 |
| center-center | 指定要素中央がウィンドウ中央へきたら発火 |
| center-top | 指定要素中央がウィンドウ上部へきたら発火 |
| bottom-bottom | 指定要素下部がウィンドウ下部へきたら発火 |
| bottom-center | 指定要素下部がウィンドウ中央へきたら発火 |
| bottom-top | 指定要素下部がウィンドウ上部へきたら発火 |