スクロールに応じてアニメーション！jQueryで要素にクラスを追加する方法

Details 2025.06.13

CSSアニメーション jQuery Web制作

118

目的：ページの特定位置にスクロールしたときに、アニメーションで要素を表示する。
使用技術：jQuery（スクロールイベント監視）、CSS（アニメーション）、クラス操作（addClass）。
主な用途：商品紹介、LP（ランディングページ）のアニメーション、スクロール型プレゼンなど。

スクロール連動アニメーション実装例
注意点・補足
Web制作現場でよくある質問（FAQ）
Q1: この機能にはプラグインが必要ですか？
Q2: 特定の要素に到達したかどうかはどう判断しますか？
Q3: アニメーションは一度だけ実行されますか？
まとめ

スクロール連動アニメーション実装例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スクロールアニメーションのデモ</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

    .section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      background: #f0f0f0;
      border-bottom: 1px solid #ccc;
    }

    /* アニメーションの初期状態 */
    .common-animate-item {
      transition: all 0.6s ease;
      opacity: 0;
      transform: translateY(50px);
    }

    /* アニメーションが発動した状態 */
    .common-animate-item.animate-in {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>

  <div class="section">スクロールしてください 👇</div>

  <div class="section common-animate-item">アニメーション要素 1</div>
  <div class="section common-animate-item">アニメーション要素 2</div>
  <div class="section common-animate-item">アニメーション要素 3</div>
  <div class="section common-animate-item">アニメーション要素 4</div>

  <!-- jQueryの読み込み -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
    // スクロールイベントのスロットル処理（負荷軽減）
    function throttle(fn, wait) {
      let lastTime = 0;
      return function () {
        let now = new Date().getTime();
        if (now - lastTime > wait) {
          fn.apply(this, arguments);
          lastTime = now;
        }
      };
    }

    // アニメーション対象に初期クラスを追加
    function initAnimateItems() {
      $(".common-animate-item").each(function () {
        $(this).addClass("normalmove");
      });
    }

    // スクロール時にアニメーションを実行
    function handleScrollAnimation() {
      $(".common-animate-item.normalmove").each(function () {
        const $el = $(this);
        const triggerPoint = $(window).height() * 0.75;
        const scrollTop = $(window).scrollTop();
        const offsetTop = $el.offset().top;

        if (scrollTop > offsetTop - triggerPoint) {
          $el.removeClass("normalmove").addClass("animate-in");
        }
      });
    }

    // 初期化処理とイベントの設定
    $(function () {
      initAnimateItems();
      handleScrollAnimation(); // 最初に表示されている要素にも対応

      $(window).on("scroll", throttle(handleScrollAnimation, 100));
    });
  </script>
</body>
</html>

注意点・補足

パフォーマンスへの影響：scroll イベントは頻繁に発火するため、throttle（スロットル）や debounce（デバウンス）処理を加えるとよいです。
モバイル対応：古いスマートフォンブラウザでは動作が不安定な場合があるので、テストが必要です。
一度だけ実行する工夫：状態フラグや「once」クラスなどで、繰り返し処理されないよう制御するのがポイントです。
トリガーのタイミング調整：発動位置を調整することで、アニメーションの見逃しを防げます。