Web活のロゴ

Web制作Output&初心者のための徹底ガイド

お問い合わせ

注目のタグ

#VsCode#Scss#Gsap#Pug#Swiper#ChatGTP
    TOP>Javascript>【AOS.js】アニメーションライブラリ

【AOS.js】アニメーションライブラリ

2024.06.09
はじめに
概要

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で読み込む方法や、モジュールバンドラを使用した設定。また、カスタマイズについて詳細を記述いたします。参考にしていただければ幸いです。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
スポンサーリンク

実装内容

<div  data-aos=”fade-up“></div>
<div  data-aos=”fade-down“></div>
<div  data-aos=”fade-left“></div>
<div  data-aos=”fade-right“></div>

公式リンク

https://michalsnik.github.io/aos

GitHub

https://github.com/michalsnik/aos

特徴

  • 実装が簡単で、HTMLタグにdata属性を付与するだけでアニメーションが発火します。
  • 属性の変更でアニメーションが実装できる。クラス名の変更は必要がない。
  • カスタマイズが可能で、柔軟に対応できます。
  • スクロールイベントが自動で発火するため、アニメーションのコントロールがスムーズに行えます。
  • スクロールイベントの実装は簡単で、難しい設定は必要ありません。
  • 様々なオプションが用意されており、実装の幅が広がります。

コード

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 aos
import 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アニメーション

fade-up

  <div class="box" data-aos="fade-up"></div><!-- /.box -->

アニメションの種類

フェード アニメーション

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left
fade-up-right

フリップ アニメーション

  • flip-up
  • flip-down
  • flip-left
  • flip-right
flip-up

サイド アニメーション

  • slide-up
  • slide-down
  • slide-left
  • slide-right
slide-up

ズーム アニメーション

  • 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
zoom-in

オプションの設定

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', // ウィンドウに対する要素の位置を定義して、アニメーションをトリガーします
});

カスタマイズ

コード

アニメーションのカスタマイズは以下のように設定します。

/* アニメーションの実装前 */
[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属性を使用する
Copyright
© 2023 Souichi_Kimura All Rights Reserved.