# 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 指定要素下部がウィンドウ上部へきたら発火
2023-03-23
  • javascript
  • vuejs

関連記事

Javascript 非同期処理 async と await のメモ
Nuxtjs 3 に Ant design Vue を使う
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ