# 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 1年前

javascript
vuejs

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

大きいファイルをスライス分割してアップロード

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

javascript 配列重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー

キーコード取得＆キーコード一覧

javascriptで Tabキー無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

javascript 　指定場所にスムーズにスクロールする方法

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

Javascript var let const 変数宣言の違い

javascript varとlet 違いこれからはvarよりlet constを書くようにすべき...

Javascript 電話番号フォーマット

固定電話携帯電話フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説よく使われる v-if と v-show の...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs-datepicker 使ってカレンダー表示日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

javascript で作る html から PDF 変換 pdfmake の日本語対応

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

正規表現一覧よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie

開発におけるコーディングルール・規約

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

polyfill という宝物で開発時の ie11 対応した時のメモ