【JavaScript】クラス名をつけるだけで下からふわっと現れるアニメーション【コピペOK】

2025年1月6日2025年1月7日

URLをコピーしました！

JavaScriptを使って「.animate」クラスを指定した要素を、ビューポート内に入ったら「下からふわっと出現」させる方法を解説します。

HTML

以下のように「.animate」クラスを付与したHTMLを用意します。複数の要素を動かす場合は、クラス名「.animate」を複数の要素に追加するだけでOK

<div class="wrap animate">
    ここに内容が入ります
</div>

JavaScript

ビューポート内に入った要素に「.animate-active」クラスを自動で追加するために、Intersection Observer APIを使用します。

document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-active');
      } else {
        entry.target.classList.remove('animate-active');
      }
    });
  }, {
    threshold: 0.1
  });

  document.querySelectorAll('.animate').forEach(section => {
    observer.observe(section);
  });
});

コード解説

DOMContentLoadedイベント:
- HTMLが完全に読み込まれた後に処理を開始。
IntersectionObserverの作成:
- IntersectionObserverは、要素の可視性（見え具合）を監視するためのインスタンスです。
- コールバック関数内で、監視対象要素がビューポート内に入ったかどうかをチェックします。
entries.forEach(entry):
- entriesは監視対象の要素リストです。
- 各entryオブジェクトは、要素の可視性情報（isIntersectingなど）を持っています。
isIntersecting:
- 要素がビューポート内に入った場合にtrueとなります。
- trueの場合はanimate-activeクラスを追加、falseの場合はクラスを削除。
threshold:
- 0.1は監視対象要素の10%がビューポート内に入った時点でコールバックを実行する設定です。
observer.observe():
- .animateクラスを持つ全ての要素を監視対象として登録します。

Intersection Observer APIとは？

Intersection Observer APIは、要素がビューポート内（画面内）に入ったかどうか、またその割合を監視するためのWeb APIです。このAPIを使うと、スクロールに応じた動的なアニメーションやコンテンツの遅延読み込み（Lazy Loading）を簡単に実現できます。

主な特徴

パフォーマンス向上: スクロールイベントを直接扱わないため、処理の負荷を軽減。
柔軟性: ビューポート内に入ったしきい値を自由に設定可能。
使いやすさ: 対象の要素を監視し、コールバック関数で処理を記述するシンプルな設計。

CSS

アニメーションの基本的な動作を定義します。下記のスタイルで「下からふわっと出現する動き」を実現できます。

/* 遅延アニメーション */
.animate {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
}

.animate-active {
    opacity: 1;
    transform: translateY(0);
}