ページ内スクロールで要素が下からフェードインする方法

この記事では、ページをスクロールしたときに要素がふわっと表示される「フェードイン効果」を簡単に実装する方法をご紹介します。
JavaScriptとCSSを組み合わせて、テーマを問わず動作する仕組みです。

1 HTML構造

<div class="fadein-box">
  <p>この要素がスクロールでフェードインします。</p>
</div>

フェードインさせたい要素を fadein-box クラスで囲みます。

2 function.phpにコードを追加

//-------------------------------------------
// フェードイン
//-------------------------------------------
function my_scroll_fadein_script() {
    wp_enqueue_script(
        'scroll-fadein',
        get_stylesheet_directory_uri() . '/js/scroll-fadein.js',
        array(),
        '1.0.0',
        true // フッター読み込み
    );
}
add_action('wp_enqueue_scripts', 'my_scroll_fadein_script');

3 汎用CSS

/* -----------------------------
 * フェードイン
 * ----------------------------- */

.fadein-box { /* フェードイン対象となる要素の初期状態 */
  opacity: 0; /* 初期状態では透明（非表示） */
  transform: translateY(30px); /* 下方向に30pxずらして配置 */
  transition: all 0.8s ease-out; /* アニメーションの時間と動きを設定（0.8秒でなめらかに） */
}

.fadein-box.show { /* スクロールで表示されたときの状態 */
  opacity: 1; /* 完全に表示 */
  transform: translateY(0); /* 元の位置に戻す */
}

.fadein-box:nth-child(2) { /* 2番目のフェードイン要素に遅延を追加 */
  transition-delay: 0.3s; /* 0.3秒遅れてアニメーション開始 */
}

.fadein-box:nth-child(3) { /* 3番目のフェードイン要素にさらに遅延を追加 */
  transition-delay: 0.6s; /* 0.6秒遅れてアニメーション開始 */
}

• 複数要素を段階的にフェードさせたい場合は、CSSに transition-delay を追加
• 「左から・右からスライド」などにしたい場合は translateX() を使用
• Intersection Observer API を使えば、よりパフォーマンス良く制御可能

4 JavaScriptにコードを追加

ファイル名：scroll-fadein.js
保存先：wp-content/themes/child-theme/js/scroll-fadein.js

//-------------------------------------------
// フェードイン
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  const fadeElems = document.querySelectorAll(".fadein-box");
  const showOnScroll = () => {
    const trigger = window.innerHeight * 0.85;
    fadeElems.forEach(elem => {
      const rect = elem.getBoundingClientRect();
      if (rect.top < trigger) {
        elem.classList.add("show");
      }
    });
  };
  window.addEventListener("scroll", showOnScroll);
  showOnScroll();
});

4.1 ディレクトリ構造

このスクリプトは、画面の下から85%の位置に要素が来たらクラス show を付与し、CSSアニメーションを発動させます。

5 応用例

トップページのセクションや、サービス紹介・実績一覧・CTAボタンなどにこのエフェクトを使うと、自然でプロっぽい印象になります。

6 完成イメージ

下にスクロールすると、画像や文章がふわっと現れるアニメーションになります。

7 まとめ

• HTML：.fadein-box クラスを付ける
• CSS：opacity + transform + transitionでアニメーション
• JS：スクロール検知で show クラスを付与

テーマに合わせてCSSの移動距離や速度を調整すれば、どんなデザインにもマッチします。