時間差でフェードインするアニメーション

2025年7月29日 2025年8月2日

西尾洋祐

スクロールに合わせて要素がふわっと表示されるアニメーションをご紹介します。

アニメーションの効果

ページに動きを加えることで、訪問者に心地よさや視認性の高さを与えることができます。

完成デモの紹介

まずはデモをご覧ください。

See the Pen delayScroll by はなはな氏 (@wxftomuu-the-selector) on CodePen.

ソースコードについて

HTML

今回のサンプルでは、複数の要素がスクロールに応じて時間差でふわっと表示（フェードイン）するアニメーションを実装しています。フェードインさせたい複数の要素を囲む親要素に .delayScroll クラスを付けることで、子要素にアニメーションを適用することができます

たとえば、リスト（<ul><li>）以外にも、<div> や <section> など、複数の子要素があるHTML構造であれば同様に使用できます。親要素の中にある子要素一つひとつに、時間差でアニメーションが適用され、ページに自然な動きを加えることができます。

<!-- ======================================
 jQueryの読み込み（CDN経由）
 ====================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- ======================================
 アニメーション表示ブロック（HTML構造）
 ====================================== -->
<h3>時間差でフェードインするアニメーション</h3>
<ul class="delayScroll">
  <li>１つ目の要素</li>
  <li>２つ目の要素</li>
  <li>３つ目の要素</li>
  <li>４つ目の要素</li>
  <li>５つ目の要素</li>
  <li>６つ目の要素</li>
</ul>

上記のように、親要素（<ul> タグ）に .delayScroll クラスを付けることで、子要素（<li>タグ）がスクロールに連動して時間差でふわっと表示されるようになります。

この動きを実現するには、jQueryの読み込みと、CSS、JavaScriptでのアニメーション設定が必要になります。
次に、実際のCSSとJavaScriptのコードを紹介します。

CSS

0.5秒かけて、下からふわっと浮かび上がるように表示されるアニメーションを設定しています。

/* ----------------------------------------
 コンテンツスタイル（任意で変更可能）
 ---------------------------------------- */
/* 
この部分は、delayScrollアニメーションを適用するための
サンプルレイアウト（見た目）のスタイルです。
実際のサイトに合わせて、自由にカスタマイズしてください。
*/
h3 {
  text-align: center;
}
ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  list-style: none;
  margin: 20px;
  padding: 0;
}
ul li {
  text-align: center;
  padding: 30px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* ----------------------------------------
 アニメーションの定義（fadeUp）
 ---------------------------------------- */
/*
.delayScrollクラスを持つ要素の子要素に適用されるアニメーションです。
スクロール位置に応じて、ふわっと上に浮かびながら表示されます。
*/
.fadeUp {
  animation-name: fadeUpAnime; /* 下で定義するアニメーションを適用 */
  animation-duration: 0.5s; /* アニメーションの時間は0.5秒 */
  animation-fill-mode: forwards; /* アニメーション終了後、状態を保持 */
  opacity: 0; /* 初期状態は非表示（透明） */
}

/* fadeUpアニメーションの内容 */
@keyframes fadeUpAnime {
  from {
    opacity: 0; /* 最初は透明で */
    transform: translateY(100px); /* 100px下から表示開始 */
  }
  to {
    opacity: 1; /* 完全に表示された状態に */
    transform: translateY(0); /* 元の位置に移動 */
  }
}

JS

今回の delayScrollAnime 関数では、アニメーションの遅延間隔（ディレイ）を 0.2秒に設定しています。
このディレイの値は time 変数で指定されており、数値を変更することで各子要素の表示タイミングの間隔を自由に調整できます。

// delayScrollAnime
// -------------------------
// スクロールに応じて、要素の子要素を順番にふわっと表示（フェードイン）させる関数
function delayScrollAnime() {
  var time = 0.2;            // アニメーションのディレイ間隔（秒）
  var value = time;          // 各要素に適用する現在のディレイ時間

  $('.delayScroll').each(function () {
    var parent = this;                      // 親要素（.delayScroll）のDOMを取得
    var elemPos = $(this).offset().top;     // 要素のページ上の位置（上からの距離）
    var scroll = $(window).scrollTop();     // 現在のスクロール量
    var windowHeight = $(window).height();  // ウィンドウの高さ
    var childs = $(this).children();        // .delayScroll の子要素を取得

    // 要素が画面内に入ったかどうかをチェックし、playクラスが付与されていない場合のみ実行
    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      $(childs).each(function () {
        // すでにfadeUpが付与されていない子要素に対してのみ処理
        if (!$(this).hasClass("fadeUp")) {
          $(parent).addClass("play");                   // 処理中フラグとして"play"を付与
          $(this).css("animation-delay", value + "s");  // 遅延時間を設定
          $(this).addClass("fadeUp");                   // アニメーションクラスを付与
          value = value + time;                         // 次の子要素のディレイ時間を加算

          // 最後の子要素まで処理が終わったらplayフラグを外す
          var index = $(childs).index(this);
          if ((childs.length - 1) == index) {
            $(parent).removeClass("play");
          }
        }
      });
    } else {
      // 画面外に出たとき、または条件を満たさないときはアニメーションをリセット
      $(childs).removeClass("fadeUp");
      value = time; // ディレイ時間をリセット
    }
  });
}

// ページが読み込まれた際に delayScrollAnime を実行
// -------------------------
$(window).on('load', function () {
  delayScrollAnime();
});

// スクロールまたはウィンドウサイズ変更時にも実行
// -------------------------
$(window).on('scroll resize', function () {
  delayScrollAnime();
});