【JavaScript】要素が下からふわっと表示するアニメーションを実装する方法｜Intersection Observer API

JavaScript(ジャバスクリプト)

Screenshot

2024.07.06

この記事は約5分で読めます。

Webサイトのコンテンツをより魅力的にするために、アニメーションを使用するのは効果的です。今回は、JavaScriptとCSSを使用して、要素が画面に入ってきた時に下からふわっと表示されるアニメーションを実装する方法をご紹介します。

HTMLの準備
CSSの作成
JavaScriptの実装
Intersection Observer APIとは
まとめ

HTMLの準備

まず、アニメーションを適用したい要素をHTMLに追加します。以下のようにシンプルなHTML構造を用意します。

 <div class="animated-element">Hello, world!</div>

Hello, world!と表示されるだけのシンプルな要素です。

CSSの作成

次に、アニメーションのためのCSSを作成します。

要素が画面に入る前と入った後のスタイルを設定し、スムーズなアニメーション効果を実現します。

.animated-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animated-element.show {
  opacity: 1;
  transform: translateY(0);
}

ここでは、.animated-element クラスに対して初期状態の透明度と位置を設定し、show クラスが追加されたときに変化するようにしています。

JavaScriptの実装

最後に、要素が画面に入ってきた時にアニメーションをトリガーするJavaScriptを追加します。これにはIntersection Observer APIを使用します。

document.addEventListener("DOMContentLoaded", function() {
  const element = document.querySelector(".animated-element");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        element.classList.add("show");
      }
    });
  });

  observer.observe(element);
});

このスクリプトでは、ページの読み込みが完了した後に、対象の要素がビューポートに入った際にshowクラスを追加することで、CSSで定義したアニメーションをトリガーします。

要素が画面内に入ると、文字が表示されます。

Intersection Observer APIとは

Intersection Observer APIは、要素がビューポート（表示領域）内に入ったり出たりすることを監視するためのJavaScript APIです。これにより、スクロールに応じたイベントの発生や、遅延読み込み（Lazy Loading）などを効率的に実装することができます。

主な用途

無限スクロール: ユーザーがページをスクロールすると新しいコンテンツを自動的に読み込む機能。
画像の遅延読み込み: 画像や他のリソースを、ユーザーが実際にそれを表示しようとするまで読み込まないようにすることで、ページの初期読み込み時間を短縮する。
アニメーションのトリガー: 要素が表示領域に入ったときにアニメーションを開始する。

Intersection Observer APIを使用するには、まず IntersectionObserver オブジェクトを作成し、その後、監視したい要素を指定します。

1. IntersectionObserverの作成

let observer = new IntersectionObserver(callback, options);

callback: 監視対象の要素が表示領域に入るか出ると呼び出される関数。
options: 監視の設定オプション（省略可能）。

2. オプションの設定

let options = {
  root: null, // デフォルトはビューポート
  rootMargin: '0px', // 監視領域のマージン
  threshold: 1.0 // コールバックが呼ばれる閾値
};

root: 監視対象の要素が入るビューポート。nullの場合はデフォルトのビューポート。
rootMargin: ビューポートの周りに追加するマージン。
threshold: 要素がどの程度ビューポートに入った時点でコールバックが呼ばれるかを示す値（0.0〜1.0）。

3. コールバック関数の定義

let callback = function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 要素が表示領域に入った場合の処理
    } else {
      // 要素が表示領域から出た場合の処理
    }
  });
};

4. 要素の監視開始

let target = document.querySelector('.target-element');
observer.observe(target);

要素がビューポートに入った時にクラスを追加し、CSSで定義したアニメーションを実行することができます。

まとめ

以上の手順で、要素が画面に入ってきた時に下からふわっと表示されるアニメーションを簡単に実装することができます。CSSでアニメーションのスタイルを設定し、JavaScriptでタイミングを制御することで、ユーザーにとって視覚的に魅力的な体験を提供できます。ぜひ試してみてください。