スクロールフェードインの作り方｜Intersection Observer で出現演出を実装【コピペOK】

<div class="c-fade">
  <div class="c-fade__item" data-fade-in>
    <h2 class="c-fade__heading">スクロールで出現するカード</h2>
    <p class="c-fade__text">
      ビューポートに 15% 入った時点で <code>.is-visible</code> が付与され、
      透明＋少し下にずれた状態から、本来の位置へフェードインします。
    </p>
  </div>

  <div class="c-fade__row">
    <div class="c-fade__item" data-fade-in>
      <h2 class="c-fade__heading">通常通り表示されるカード</h2>
      <p class="c-fade__text">
        遅延なし。3 枚とも同じ上方向のフェードインなので、
        <code>data-fade-delay</code> による出現タイミングの差だけを見比べられます。
      </p>
    </div>

    <div class="c-fade__item" data-fade-in data-fade-delay="150">
      <h2 class="c-fade__heading">少し遅れて表示されるカード</h2>
      <p class="c-fade__text">
        <code>data-fade-delay="150"</code> で、表示開始を 150ms 遅らせています。
        隣のカードよりわずかに後から出現します。
      </p>
    </div>

    <div class="c-fade__item" data-fade-in data-fade-delay="300">
      <h2 class="c-fade__heading">さらに遅れて表示されるカード</h2>
      <p class="c-fade__text">
        <code>data-fade-delay="300"</code> でさらに遅延。属性に数値を振り分けるだけで、
        連続感のある演出にできます（連番遅延を自動で配る応用は別パターンで扱います）。
      </p>
    </div>
  </div>

  <div class="c-fade__item" data-fade-in data-fade-direction="left">
    <h2 class="c-fade__heading">左からスライドインするカード</h2>
    <p class="c-fade__text">
      <code>data-fade-direction="left"</code> で、左方向からの
      スライドインに切り替わります。方向は属性だけで指定でき、JS の変更は不要です。
    </p>
  </div>

  <div class="c-fade__item" data-fade-in data-fade-direction="right">
    <h2 class="c-fade__heading">右からスライドインするカード</h2>
    <p class="c-fade__text">
      出現方向を要素ごとに変えても、監視ロジックは共通のままです。
      レイアウトやデザインに合わせて方向だけを差し替えられます。
    </p>
  </div>

  <div class="c-fade__item" data-fade-in data-fade-direction="none">
    <h2 class="c-fade__heading">動きなしで純粋にフェードするカード</h2>
    <p class="c-fade__text">
      <code>data-fade-direction="none"</code> は <code>transform</code> を使わず、
      <code>opacity</code> だけでふわっと現れる純フェードです。位置の移動を伴いません。
      一度表示したら監視を解除するため、上下に何度スクロールしても再アニメーションはしません（ワンショット表示）。
    </p>
  </div>
</div>

<div class="c-fade">
  <div class="c-fade__item" data-fade-in>
    <h2 class="c-fade__heading">スクロールで出現するカード</h2>
    <p class="c-fade__text">
      ビューポートに 15% 入った時点で <code>.is-visible</code> が付与され、
      透明＋少し下にずれた状態から、本来の位置へフェードインします。
    </p>
  </div>

  <div class="c-fade__row">
    <div class="c-fade__item" data-fade-in>
      <h2 class="c-fade__heading">通常通り表示されるカード</h2>
      <p class="c-fade__text">
        遅延なし。3 枚とも同じ上方向のフェードインなので、
        <code>data-fade-delay</code> による出現タイミングの差だけを見比べられます。
      </p>
    </div>

    <div class="c-fade__item" data-fade-in data-fade-delay="150">
      <h2 class="c-fade__heading">少し遅れて表示されるカード</h2>
      <p class="c-fade__text">
        <code>data-fade-delay="150"</code> で、表示開始を 150ms 遅らせています。
        隣のカードよりわずかに後から出現します。
      </p>
    </div>

    <div class="c-fade__item" data-fade-in data-fade-delay="300">
      <h2 class="c-fade__heading">さらに遅れて表示されるカード</h2>
      <p class="c-fade__text">
        <code>data-fade-delay="300"</code> でさらに遅延。属性に数値を振り分けるだけで、
        連続感のある演出にできます（連番遅延を自動で配る応用は別パターンで扱います）。
      </p>
    </div>
  </div>

  <div class="c-fade__item" data-fade-in data-fade-direction="left">
    <h2 class="c-fade__heading">左からスライドインするカード</h2>
    <p class="c-fade__text">
      <code>data-fade-direction="left"</code> で、左方向からの
      スライドインに切り替わります。方向は属性だけで指定でき、JS の変更は不要です。
    </p>
  </div>

  <div class="c-fade__item" data-fade-in data-fade-direction="right">
    <h2 class="c-fade__heading">右からスライドインするカード</h2>
    <p class="c-fade__text">
      出現方向を要素ごとに変えても、監視ロジックは共通のままです。
      レイアウトやデザインに合わせて方向だけを差し替えられます。
    </p>
  </div>

  <div class="c-fade__item" data-fade-in data-fade-direction="none">
    <h2 class="c-fade__heading">動きなしで純粋にフェードするカード</h2>
    <p class="c-fade__text">
      <code>data-fade-direction="none"</code> は <code>transform</code> を使わず、
      <code>opacity</code> だけでふわっと現れる純フェードです。位置の移動を伴いません。
      一度表示したら監視を解除するため、上下に何度スクロールしても再アニメーションはしません（ワンショット表示）。
    </p>
  </div>
</div>

/* 出現演出のトークン
   --fade-distance: 初期位置のずらし量（スライド距離）
   --fade-duration: フェード/スライドの所要時間
   --fade-easing:   減速して止まる自然なイージング */
:root {
  --fade-distance: 24px;
  --fade-duration: 0.6s;
  --fade-easing:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* 初期状態: html.js のときだけ「透明＋ずらした位置」にして隠す。
   JS が動かない環境では効かないため、要素は最初から表示される。 */
.js .c-fade__item[data-fade-in] {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  transition:
    opacity var(--fade-duration) var(--fade-easing),
    transform var(--fade-duration) var(--fade-easing);
  /* 不可視の間はクリック/フォーカス対象にしない（透明な要素の誤操作を防ぐ）。 */
  pointer-events: none;
  will-change: opacity, transform;
}

/* 出現方向の切り替え（初期位置のずらし方向だけを変える） */
.js .c-fade__item[data-fade-direction="down"] {
  transform: translateY(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="left"] {
  transform: translateX(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="right"] {
  transform: translateX(var(--fade-distance));
}

/* 純フェード（動きなし）: transform を当てず opacity だけで出現させる。
   transition も opacity だけにして無駄な合成を避ける。 */
.js .c-fade__item[data-fade-direction="none"] {
  transform: none;
  transition: opacity var(--fade-duration) var(--fade-easing);
  will-change: opacity;
}

/* 最終状態: translate を 0 に戻し、本来の位置へ。
   will-change も auto に戻し、合成レイヤーが残り続けるのを防ぐ。 */
.js .c-fade__item.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  /* 表示されたら操作可能に戻す。 */
  pointer-events: auto;
  will-change: auto;
}

/* prefers-reduced-motion: 動きを減らす設定が有効なときは
   演出を行わず、即時に最終状態（表示）で見せる。 */
@media (prefers-reduced-motion: reduce) {
  .js .c-fade__item[data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
    /* 即時表示されるため、表示と同時に操作可能にする。 */
    pointer-events: auto;
    will-change: auto;
  }
}

/* 出現演出のトークン
   --fade-distance: 初期位置のずらし量（スライド距離）
   --fade-duration: フェード/スライドの所要時間
   --fade-easing:   減速して止まる自然なイージング */
:root {
  --fade-distance: 24px;
  --fade-duration: 0.6s;
  --fade-easing:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* 初期状態: html.js のときだけ「透明＋ずらした位置」にして隠す。
   JS が動かない環境では効かないため、要素は最初から表示される。 */
.js .c-fade__item[data-fade-in] {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  transition:
    opacity var(--fade-duration) var(--fade-easing),
    transform var(--fade-duration) var(--fade-easing);
  /* 不可視の間はクリック/フォーカス対象にしない（透明な要素の誤操作を防ぐ）。 */
  pointer-events: none;
  will-change: opacity, transform;
}

/* 出現方向の切り替え（初期位置のずらし方向だけを変える） */
.js .c-fade__item[data-fade-direction="down"] {
  transform: translateY(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="left"] {
  transform: translateX(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="right"] {
  transform: translateX(var(--fade-distance));
}

/* 純フェード（動きなし）: transform を当てず opacity だけで出現させる。
   transition も opacity だけにして無駄な合成を避ける。 */
.js .c-fade__item[data-fade-direction="none"] {
  transform: none;
  transition: opacity var(--fade-duration) var(--fade-easing);
  will-change: opacity;
}

/* 最終状態: translate を 0 に戻し、本来の位置へ。
   will-change も auto に戻し、合成レイヤーが残り続けるのを防ぐ。 */
.js .c-fade__item.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  /* 表示されたら操作可能に戻す。 */
  pointer-events: auto;
  will-change: auto;
}

/* prefers-reduced-motion: 動きを減らす設定が有効なときは
   演出を行わず、即時に最終状態（表示）で見せる。 */
@media (prefers-reduced-motion: reduce) {
  .js .c-fade__item[data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
    /* 即時表示されるため、表示と同時に操作可能にする。 */
    pointer-events: auto;
    will-change: auto;
  }
}

/**
 * Intersection Observer でスクロール出現演出（フェード/スライドイン）を行う基本実装。
 *
 * 設計方針:
 * - 監視対象は data-fade-in 属性を持つ要素。HTML 側で属性を付けるだけで
 *   対象を増やせる。
 * - 状態は .is-visible クラスを真実の源（single source of truth）とし、
 *   CSS が .is-visible セレクタで見た目（opacity / transform）を切り替える。
 * - ワンショット表示: 一度可視になった要素は unobserve して監視を解除する。
 *   これにより上下スクロールでの再アニメーションと多重発火を防ぐ。
 *
 * プログレッシブエンハンスメント / フォールバック:
 * - 初期状態の「隠す」スタイルは CSS 側で html.js のときだけ適用される。
 *   このスクリプトは末尾で対象要素に .is-visible を付け得るが、
 *   そもそも IO 非対応・JS 無効環境では html が no-js のままになり、
 *   要素は最初から表示される（コンテンツが消えない）。
 * - IntersectionObserver 非対応ブラウザでは、全要素を即時に表示状態にする。
 */

(function () {
  "use strict";

  // 監視対象を取得（同一ページ内に複数あっても動作する）
  const targets = document.querySelectorAll("[data-fade-in]");

  if (targets.length === 0) return;

  /**
   * 1要素を最終状態（表示）にする
   * @param {HTMLElement} el - 対象要素
   */
  function reveal(el) {
    // data-fade-delay（ms）が指定されていれば、その分だけ表示開始を遅らせる。
    // 値が無い・数値でない場合は遅延 0 として扱う。
    const delay = Number(el.dataset.fadeDelay) || 0;

    if (delay > 0) {
      window.setTimeout(function () {
        el.classList.add("is-visible");
      }, delay);
    } else {
      el.classList.add("is-visible");
    }
  }

  // IntersectionObserver 非対応環境のフォールバック:
  // 監視せず、全要素を即時に表示状態にする（隠れたまま残るのを防ぐ）。
  if (!("IntersectionObserver" in window)) {
    targets.forEach(function (el) {
      el.classList.add("is-visible");
    });
    return;
  }

  /**
   * 観測オプション
   * - threshold: 0.15
   *     要素の 15% がビューポートに入った時点で発火する。
   *     0（1px でも入れば発火）だと、画面下端にかすめた瞬間に出てしまい
   *     演出として認識されにくい。逆に高すぎると大きい要素が
   *     画面に収まらず発火しないため、視認と確実な発火のバランスで 0.15 とする。
   * - rootMargin: "0px 0px -10% 0px"
   *     ビューポート下端を 10% 内側に詰めて判定する。要素が画面の
   *     やや上に入ってから出現させることで、スクロールに対して
   *     自然なタイミングになる（下端ギリギリでの発火を避ける）。
   */
  const observer = new IntersectionObserver(
    function (entries, obs) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;

        reveal(entry.target);

        // ワンショット表示: 一度表示したら監視を解除する。
        // これにより再交差時の多重発火を防ぎ、不要な監視も止める。
        obs.unobserve(entry.target);
      });
    },
    {
      threshold: 0.15,
      rootMargin: "0px 0px -10% 0px",
    }
  );

  // 全対象を監視に登録
  targets.forEach(function (el) {
    observer.observe(el);
  });
})();

/**
 * Intersection Observer でスクロール出現演出（フェード/スライドイン）を行う基本実装。
 *
 * 設計方針:
 * - 監視対象は data-fade-in 属性を持つ要素。HTML 側で属性を付けるだけで
 *   対象を増やせる。
 * - 状態は .is-visible クラスを真実の源（single source of truth）とし、
 *   CSS が .is-visible セレクタで見た目（opacity / transform）を切り替える。
 * - ワンショット表示: 一度可視になった要素は unobserve して監視を解除する。
 *   これにより上下スクロールでの再アニメーションと多重発火を防ぐ。
 *
 * プログレッシブエンハンスメント / フォールバック:
 * - 初期状態の「隠す」スタイルは CSS 側で html.js のときだけ適用される。
 *   このスクリプトは末尾で対象要素に .is-visible を付け得るが、
 *   そもそも IO 非対応・JS 無効環境では html が no-js のままになり、
 *   要素は最初から表示される（コンテンツが消えない）。
 * - IntersectionObserver 非対応ブラウザでは、全要素を即時に表示状態にする。
 */

(function () {
  "use strict";

  // 監視対象を取得（同一ページ内に複数あっても動作する）
  const targets = document.querySelectorAll("[data-fade-in]");

  if (targets.length === 0) return;

  /**
   * 1要素を最終状態（表示）にする
   * @param {HTMLElement} el - 対象要素
   */
  function reveal(el) {
    // data-fade-delay（ms）が指定されていれば、その分だけ表示開始を遅らせる。
    // 値が無い・数値でない場合は遅延 0 として扱う。
    const delay = Number(el.dataset.fadeDelay) || 0;

    if (delay > 0) {
      window.setTimeout(function () {
        el.classList.add("is-visible");
      }, delay);
    } else {
      el.classList.add("is-visible");
    }
  }

  // IntersectionObserver 非対応環境のフォールバック:
  // 監視せず、全要素を即時に表示状態にする（隠れたまま残るのを防ぐ）。
  if (!("IntersectionObserver" in window)) {
    targets.forEach(function (el) {
      el.classList.add("is-visible");
    });
    return;
  }

  /**
   * 観測オプション
   * - threshold: 0.15
   *     要素の 15% がビューポートに入った時点で発火する。
   *     0（1px でも入れば発火）だと、画面下端にかすめた瞬間に出てしまい
   *     演出として認識されにくい。逆に高すぎると大きい要素が
   *     画面に収まらず発火しないため、視認と確実な発火のバランスで 0.15 とする。
   * - rootMargin: "0px 0px -10% 0px"
   *     ビューポート下端を 10% 内側に詰めて判定する。要素が画面の
   *     やや上に入ってから出現させることで、スクロールに対して
   *     自然なタイミングになる（下端ギリギリでの発火を避ける）。
   */
  const observer = new IntersectionObserver(
    function (entries, obs) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;

        reveal(entry.target);

        // ワンショット表示: 一度表示したら監視を解除する。
        // これにより再交差時の多重発火を防ぎ、不要な監視も止める。
        obs.unobserve(entry.target);
      });
    },
    {
      threshold: 0.15,
      rootMargin: "0px 0px -10% 0px",
    }
  );

  // 全対象を監視に登録
  targets.forEach(function (el) {
    observer.observe(el);
  });
})();

<!DOCTYPE html>
<html lang="ja" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>スクロールフェードイン</title>

    <!--
      JS が読み込まれる前に html の class を no-js → js へ書き換える。
      head 内のインラインスクリプトで実行することで、画面描画前に
      切り替わり、初期状態のチラつき（FOUC）を防ぐ。
      JS 無効環境・このスクリプトが届かない環境では no-js のままになり、
      CSS 側で要素を最初から表示状態にする（コンテンツ消失を防ぐ）。
    -->
    <script>
      document.documentElement.classList.remove("no-js");
      document.documentElement.classList.add("js");
    </script>

    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <main class="l-main">
      <section class="p-section">
        <div class="c-fade">
          <div class="c-fade__item" data-fade-in>
            <h2 class="c-fade__heading">スクロールで出現するカード</h2>
            <p class="c-fade__text">
              ビューポートに 15% 入った時点で <code>.is-visible</code> が付与され、
              透明＋少し下にずれた状態から、本来の位置へフェードインします。
            </p>
          </div>

          <div class="c-fade__row">
            <div class="c-fade__item" data-fade-in>
              <h2 class="c-fade__heading">通常通り表示されるカード</h2>
              <p class="c-fade__text">
                遅延なし。3 枚とも同じ上方向のフェードインなので、
                <code>data-fade-delay</code> による出現タイミングの差だけを見比べられます。
              </p>
            </div>

            <div class="c-fade__item" data-fade-in data-fade-delay="150">
              <h2 class="c-fade__heading">少し遅れて表示されるカード</h2>
              <p class="c-fade__text">
                <code>data-fade-delay="150"</code> で、表示開始を 150ms 遅らせています。
                隣のカードよりわずかに後から出現します。
              </p>
            </div>

            <div class="c-fade__item" data-fade-in data-fade-delay="300">
              <h2 class="c-fade__heading">さらに遅れて表示されるカード</h2>
              <p class="c-fade__text">
                <code>data-fade-delay="300"</code> でさらに遅延。属性に数値を振り分けるだけで、
                連続感のある演出にできます（連番遅延を自動で配る応用は別パターンで扱います）。
              </p>
            </div>
          </div>

          <div class="c-fade__item" data-fade-in data-fade-direction="left">
            <h2 class="c-fade__heading">左からスライドインするカード</h2>
            <p class="c-fade__text">
              <code>data-fade-direction="left"</code> で、左方向からの
              スライドインに切り替わります。方向は属性だけで指定でき、JS の変更は不要です。
            </p>
          </div>

          <div class="c-fade__item" data-fade-in data-fade-direction="right">
            <h2 class="c-fade__heading">右からスライドインするカード</h2>
            <p class="c-fade__text">
              出現方向を要素ごとに変えても、監視ロジックは共通のままです。
              レイアウトやデザインに合わせて方向だけを差し替えられます。
            </p>
          </div>

          <div class="c-fade__item" data-fade-in data-fade-direction="none">
            <h2 class="c-fade__heading">動きなしで純粋にフェードするカード</h2>
            <p class="c-fade__text">
              <code>data-fade-direction="none"</code> は <code>transform</code> を使わず、
              <code>opacity</code> だけでふわっと現れる純フェードです。位置の移動を伴いません。
              一度表示したら監視を解除するため、上下に何度スクロールしても再アニメーションはしません（ワンショット表示）。
            </p>
          </div>
        </div>
      </section>
    </main>

    <script src="./assets/js/script.js" defer></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ja" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>スクロールフェードイン</title>

    <!--
      JS が読み込まれる前に html の class を no-js → js へ書き換える。
      head 内のインラインスクリプトで実行することで、画面描画前に
      切り替わり、初期状態のチラつき（FOUC）を防ぐ。
      JS 無効環境・このスクリプトが届かない環境では no-js のままになり、
      CSS 側で要素を最初から表示状態にする（コンテンツ消失を防ぐ）。
    -->
    <script>
      document.documentElement.classList.remove("no-js");
      document.documentElement.classList.add("js");
    </script>

    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <main class="l-main">
      <section class="p-section">
        <div class="c-fade">
          <div class="c-fade__item" data-fade-in>
            <h2 class="c-fade__heading">スクロールで出現するカード</h2>
            <p class="c-fade__text">
              ビューポートに 15% 入った時点で <code>.is-visible</code> が付与され、
              透明＋少し下にずれた状態から、本来の位置へフェードインします。
            </p>
          </div>

          <div class="c-fade__row">
            <div class="c-fade__item" data-fade-in>
              <h2 class="c-fade__heading">通常通り表示されるカード</h2>
              <p class="c-fade__text">
                遅延なし。3 枚とも同じ上方向のフェードインなので、
                <code>data-fade-delay</code> による出現タイミングの差だけを見比べられます。
              </p>
            </div>

            <div class="c-fade__item" data-fade-in data-fade-delay="150">
              <h2 class="c-fade__heading">少し遅れて表示されるカード</h2>
              <p class="c-fade__text">
                <code>data-fade-delay="150"</code> で、表示開始を 150ms 遅らせています。
                隣のカードよりわずかに後から出現します。
              </p>
            </div>

            <div class="c-fade__item" data-fade-in data-fade-delay="300">
              <h2 class="c-fade__heading">さらに遅れて表示されるカード</h2>
              <p class="c-fade__text">
                <code>data-fade-delay="300"</code> でさらに遅延。属性に数値を振り分けるだけで、
                連続感のある演出にできます（連番遅延を自動で配る応用は別パターンで扱います）。
              </p>
            </div>
          </div>

          <div class="c-fade__item" data-fade-in data-fade-direction="left">
            <h2 class="c-fade__heading">左からスライドインするカード</h2>
            <p class="c-fade__text">
              <code>data-fade-direction="left"</code> で、左方向からの
              スライドインに切り替わります。方向は属性だけで指定でき、JS の変更は不要です。
            </p>
          </div>

          <div class="c-fade__item" data-fade-in data-fade-direction="right">
            <h2 class="c-fade__heading">右からスライドインするカード</h2>
            <p class="c-fade__text">
              出現方向を要素ごとに変えても、監視ロジックは共通のままです。
              レイアウトやデザインに合わせて方向だけを差し替えられます。
            </p>
          </div>

          <div class="c-fade__item" data-fade-in data-fade-direction="none">
            <h2 class="c-fade__heading">動きなしで純粋にフェードするカード</h2>
            <p class="c-fade__text">
              <code>data-fade-direction="none"</code> は <code>transform</code> を使わず、
              <code>opacity</code> だけでふわっと現れる純フェードです。位置の移動を伴いません。
              一度表示したら監視を解除するため、上下に何度スクロールしても再アニメーションはしません（ワンショット表示）。
            </p>
          </div>
        </div>
      </section>
    </main>

    <script src="./assets/js/script.js" defer></script>
  </body>
</html>

/* ================================================
   カスタムプロパティ
   出現演出の距離・時間・イージングをここで
   一元管理する。
   ================================================ */
:root {
  --fade-color-text:        #2b2b2b;
  --fade-color-text-muted:  #555;
  --fade-color-border:      #e0e0e0;
  --fade-color-bg:          #ffffff;
  --fade-color-accent:      #3ba9e0;

  --fade-radius:            8px;
  --fade-card-padding-y:    24px;
  --fade-card-padding-x:    24px;

  /* 出現演出のトークン
     --fade-distance: 初期位置のずらし量（スライド距離）
     --fade-duration: フェード/スライドの所要時間
     --fade-easing:   減速して止まる自然なイージング */
  --fade-distance:          24px;
  --fade-duration:          0.6s;
  --fade-easing:            cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   ベースリセット（デモページ用）
   ================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--fade-color-text);
  background-color: #fafafa;
  line-height: 1.7;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background-color: #eef0f3;
  border-radius: 4px;
}

/* ================================================
   l-main / p-section: デモページのレイアウト
   ================================================ */
.l-main {
  max-width: 720px;
  margin-inline: auto;
  padding: 40px 20px;
}

.p-section__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
}

.p-section__text {
  margin: 0 0 24px;
  color: var(--fade-color-text-muted);
}

@media (min-width: 768px) {
  .p-section__title {
    font-size: 28px;
  }
}

/* ================================================
   c-fade: 出現演出するカードのリスト
   縦に並べ、十分なスクロール量を確保することで
   デモページ上で出現タイミングを確認できる。
   ================================================ */
.c-fade {
  display: flex;
  flex-direction: column;
  gap: 24px;

  /* スクロールで出現する様子を確認できるよう、
     ビューポートより縦に長くなる余白を確保する。 */
  padding-bottom: 60vh;
}

/* ================================================
   c-fade__item: 出現演出の対象カード
   ================================================ */
.c-fade__item {
  padding: var(--fade-card-padding-y) var(--fade-card-padding-x);
  background-color: var(--fade-color-bg);
  border: 1px solid var(--fade-color-border);
  border-left: 4px solid var(--fade-color-accent);
  border-radius: var(--fade-radius);
}

/* ================================================
   c-fade__row: カードを横一列に並べるラッパー
   モバイル幅では縦積み、768px 以上で 3 列に切り替える。
   遅延差（data-fade-delay）の効果を「同じ方向・同じ位置関係」で
   見比べられるよう、行内のカードは出現方向を揃える前提で使う。
   ================================================ */
.c-fade__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .c-fade__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-fade__heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.c-fade__text {
  margin: 0;
  color: var(--fade-color-text-muted);
}

/* ================================================
   出現演出の本体
   プログレッシブエンハンスメント:
   - JS が動く環境では html.js が付与される。
     このときだけ初期状態を「透明＋ずらした位置」にし、
     .is-visible が付くまで隠す。
   - JS 無効・このスクリプトが届かない環境では html.no-js の
     ままになり、下記ルールが効かないため、要素は最初から
     通常表示される（コンテンツが消えない）。
   ================================================ */
.js .c-fade__item[data-fade-in] {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  transition:
    opacity var(--fade-duration) var(--fade-easing),
    transform var(--fade-duration) var(--fade-easing);
  /* 不可視の間はクリック/フォーカス対象にしない（透明な要素の誤操作を防ぐ）。
     レイアウトは確保したまま、表示後に pointer-events を auto へ戻す。 */
  pointer-events: none;
  will-change: opacity, transform;
}

/* 出現方向の切り替え（初期位置のずらし方向だけを変える） */
.js .c-fade__item[data-fade-direction="down"] {
  transform: translateY(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="left"] {
  transform: translateX(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="right"] {
  transform: translateX(var(--fade-distance));
}

/* 純フェード（動きなし）: transform を一切当てず、opacity だけで出現させる。
   初期状態は opacity: 0 のみ。translate を打ち消すのではなく最初から付与
   しないため、transition も opacity だけにして無駄な合成を避ける。 */
.js .c-fade__item[data-fade-direction="none"] {
  transform: none;
  transition: opacity var(--fade-duration) var(--fade-easing);
  will-change: opacity;
}

/* ビューポート進入後に付与される最終状態
   どの方向指定でも translate を 0 に戻し、本来の位置へ。
   will-change はワンショット表示の都合上、出現後はもう不要になる。
   CSS 側の最終状態で auto に戻すことで、表示後も合成レイヤーが残り
   続けるのを防ぐ（要素数が多いページでのメモリ常駐を回避）。 */
.js .c-fade__item.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  /* 表示されたら操作可能に戻す。 */
  pointer-events: auto;
  will-change: auto;
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーには、フェード/スライドを行わず
   即時に最終状態（表示）で見せる。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .c-fade__item[data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
    /* 即時表示されるため、表示と同時に操作可能にする
       （可視なのに操作不可になる不整合を防ぐ）。 */
    pointer-events: auto;
    will-change: auto;
  }
}

/* ================================================
   カスタムプロパティ
   出現演出の距離・時間・イージングをここで
   一元管理する。
   ================================================ */
:root {
  --fade-color-text:        #2b2b2b;
  --fade-color-text-muted:  #555;
  --fade-color-border:      #e0e0e0;
  --fade-color-bg:          #ffffff;
  --fade-color-accent:      #3ba9e0;

  --fade-radius:            8px;
  --fade-card-padding-y:    24px;
  --fade-card-padding-x:    24px;

  /* 出現演出のトークン
     --fade-distance: 初期位置のずらし量（スライド距離）
     --fade-duration: フェード/スライドの所要時間
     --fade-easing:   減速して止まる自然なイージング */
  --fade-distance:          24px;
  --fade-duration:          0.6s;
  --fade-easing:            cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   ベースリセット（デモページ用）
   ================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--fade-color-text);
  background-color: #fafafa;
  line-height: 1.7;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background-color: #eef0f3;
  border-radius: 4px;
}

/* ================================================
   l-main / p-section: デモページのレイアウト
   ================================================ */
.l-main {
  max-width: 720px;
  margin-inline: auto;
  padding: 40px 20px;
}

.p-section__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
}

.p-section__text {
  margin: 0 0 24px;
  color: var(--fade-color-text-muted);
}

@media (min-width: 768px) {
  .p-section__title {
    font-size: 28px;
  }
}

/* ================================================
   c-fade: 出現演出するカードのリスト
   縦に並べ、十分なスクロール量を確保することで
   デモページ上で出現タイミングを確認できる。
   ================================================ */
.c-fade {
  display: flex;
  flex-direction: column;
  gap: 24px;

  /* スクロールで出現する様子を確認できるよう、
     ビューポートより縦に長くなる余白を確保する。 */
  padding-bottom: 60vh;
}

/* ================================================
   c-fade__item: 出現演出の対象カード
   ================================================ */
.c-fade__item {
  padding: var(--fade-card-padding-y) var(--fade-card-padding-x);
  background-color: var(--fade-color-bg);
  border: 1px solid var(--fade-color-border);
  border-left: 4px solid var(--fade-color-accent);
  border-radius: var(--fade-radius);
}

/* ================================================
   c-fade__row: カードを横一列に並べるラッパー
   モバイル幅では縦積み、768px 以上で 3 列に切り替える。
   遅延差（data-fade-delay）の効果を「同じ方向・同じ位置関係」で
   見比べられるよう、行内のカードは出現方向を揃える前提で使う。
   ================================================ */
.c-fade__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .c-fade__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-fade__heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.c-fade__text {
  margin: 0;
  color: var(--fade-color-text-muted);
}

/* ================================================
   出現演出の本体
   プログレッシブエンハンスメント:
   - JS が動く環境では html.js が付与される。
     このときだけ初期状態を「透明＋ずらした位置」にし、
     .is-visible が付くまで隠す。
   - JS 無効・このスクリプトが届かない環境では html.no-js の
     ままになり、下記ルールが効かないため、要素は最初から
     通常表示される（コンテンツが消えない）。
   ================================================ */
.js .c-fade__item[data-fade-in] {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  transition:
    opacity var(--fade-duration) var(--fade-easing),
    transform var(--fade-duration) var(--fade-easing);
  /* 不可視の間はクリック/フォーカス対象にしない（透明な要素の誤操作を防ぐ）。
     レイアウトは確保したまま、表示後に pointer-events を auto へ戻す。 */
  pointer-events: none;
  will-change: opacity, transform;
}

/* 出現方向の切り替え（初期位置のずらし方向だけを変える） */
.js .c-fade__item[data-fade-direction="down"] {
  transform: translateY(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="left"] {
  transform: translateX(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="right"] {
  transform: translateX(var(--fade-distance));
}

/* 純フェード（動きなし）: transform を一切当てず、opacity だけで出現させる。
   初期状態は opacity: 0 のみ。translate を打ち消すのではなく最初から付与
   しないため、transition も opacity だけにして無駄な合成を避ける。 */
.js .c-fade__item[data-fade-direction="none"] {
  transform: none;
  transition: opacity var(--fade-duration) var(--fade-easing);
  will-change: opacity;
}

/* ビューポート進入後に付与される最終状態
   どの方向指定でも translate を 0 に戻し、本来の位置へ。
   will-change はワンショット表示の都合上、出現後はもう不要になる。
   CSS 側の最終状態で auto に戻すことで、表示後も合成レイヤーが残り
   続けるのを防ぐ（要素数が多いページでのメモリ常駐を回避）。 */
.js .c-fade__item.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  /* 表示されたら操作可能に戻す。 */
  pointer-events: auto;
  will-change: auto;
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーには、フェード/スライドを行わず
   即時に最終状態（表示）で見せる。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .c-fade__item[data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
    /* 即時表示されるため、表示と同時に操作可能にする
       （可視なのに操作不可になる不整合を防ぐ）。 */
    pointer-events: auto;
    will-change: auto;
  }
}

/**
 * Intersection Observer でスクロール出現演出（フェード/スライドイン）を行う基本実装。
 *
 * 設計方針:
 * - 監視対象は data-fade-in 属性を持つ要素。HTML 側で属性を付けるだけで
 *   対象を増やせる。
 * - 状態は .is-visible クラスを真実の源（single source of truth）とし、
 *   CSS が .is-visible セレクタで見た目（opacity / transform）を切り替える。
 * - ワンショット表示: 一度可視になった要素は unobserve して監視を解除する。
 *   これにより上下スクロールでの再アニメーションと多重発火を防ぐ。
 *
 * プログレッシブエンハンスメント / フォールバック:
 * - 初期状態の「隠す」スタイルは CSS 側で html.js のときだけ適用される。
 *   このスクリプトは末尾で対象要素に .is-visible を付け得るが、
 *   そもそも IO 非対応・JS 無効環境では html が no-js のままになり、
 *   要素は最初から表示される（コンテンツが消えない）。
 * - IntersectionObserver 非対応ブラウザでは、全要素を即時に表示状態にする。
 */

(function () {
  "use strict";

  // 監視対象を取得（同一ページ内に複数あっても動作する）
  const targets = document.querySelectorAll("[data-fade-in]");

  if (targets.length === 0) return;

  /**
   * 1要素を最終状態（表示）にする
   * @param {HTMLElement} el - 対象要素
   */
  function reveal(el) {
    // data-fade-delay（ms）が指定されていれば、その分だけ表示開始を遅らせる。
    // 値が無い・数値でない場合は遅延 0 として扱う。
    const delay = Number(el.dataset.fadeDelay) || 0;

    if (delay > 0) {
      window.setTimeout(function () {
        el.classList.add("is-visible");
      }, delay);
    } else {
      el.classList.add("is-visible");
    }
  }

  // IntersectionObserver 非対応環境のフォールバック:
  // 監視せず、全要素を即時に表示状態にする（隠れたまま残るのを防ぐ）。
  if (!("IntersectionObserver" in window)) {
    targets.forEach(function (el) {
      el.classList.add("is-visible");
    });
    return;
  }

  /**
   * 観測オプション
   * - threshold: 0.15
   *     要素の 15% がビューポートに入った時点で発火する。
   *     0（1px でも入れば発火）だと、画面下端にかすめた瞬間に出てしまい
   *     演出として認識されにくい。逆に高すぎると大きい要素が
   *     画面に収まらず発火しないため、視認と確実な発火のバランスで 0.15 とする。
   * - rootMargin: "0px 0px -10% 0px"
   *     ビューポート下端を 10% 内側に詰めて判定する。要素が画面の
   *     やや上に入ってから出現させることで、スクロールに対して
   *     自然なタイミングになる（下端ギリギリでの発火を避ける）。
   */
  const observer = new IntersectionObserver(
    function (entries, obs) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;

        reveal(entry.target);

        // ワンショット表示: 一度表示したら監視を解除する。
        // これにより再交差時の多重発火を防ぎ、不要な監視も止める。
        obs.unobserve(entry.target);
      });
    },
    {
      threshold: 0.15,
      rootMargin: "0px 0px -10% 0px",
    }
  );

  // 全対象を監視に登録
  targets.forEach(function (el) {
    observer.observe(el);
  });
})();

/**
 * Intersection Observer でスクロール出現演出（フェード/スライドイン）を行う基本実装。
 *
 * 設計方針:
 * - 監視対象は data-fade-in 属性を持つ要素。HTML 側で属性を付けるだけで
 *   対象を増やせる。
 * - 状態は .is-visible クラスを真実の源（single source of truth）とし、
 *   CSS が .is-visible セレクタで見た目（opacity / transform）を切り替える。
 * - ワンショット表示: 一度可視になった要素は unobserve して監視を解除する。
 *   これにより上下スクロールでの再アニメーションと多重発火を防ぐ。
 *
 * プログレッシブエンハンスメント / フォールバック:
 * - 初期状態の「隠す」スタイルは CSS 側で html.js のときだけ適用される。
 *   このスクリプトは末尾で対象要素に .is-visible を付け得るが、
 *   そもそも IO 非対応・JS 無効環境では html が no-js のままになり、
 *   要素は最初から表示される（コンテンツが消えない）。
 * - IntersectionObserver 非対応ブラウザでは、全要素を即時に表示状態にする。
 */

(function () {
  "use strict";

  // 監視対象を取得（同一ページ内に複数あっても動作する）
  const targets = document.querySelectorAll("[data-fade-in]");

  if (targets.length === 0) return;

  /**
   * 1要素を最終状態（表示）にする
   * @param {HTMLElement} el - 対象要素
   */
  function reveal(el) {
    // data-fade-delay（ms）が指定されていれば、その分だけ表示開始を遅らせる。
    // 値が無い・数値でない場合は遅延 0 として扱う。
    const delay = Number(el.dataset.fadeDelay) || 0;

    if (delay > 0) {
      window.setTimeout(function () {
        el.classList.add("is-visible");
      }, delay);
    } else {
      el.classList.add("is-visible");
    }
  }

  // IntersectionObserver 非対応環境のフォールバック:
  // 監視せず、全要素を即時に表示状態にする（隠れたまま残るのを防ぐ）。
  if (!("IntersectionObserver" in window)) {
    targets.forEach(function (el) {
      el.classList.add("is-visible");
    });
    return;
  }

  /**
   * 観測オプション
   * - threshold: 0.15
   *     要素の 15% がビューポートに入った時点で発火する。
   *     0（1px でも入れば発火）だと、画面下端にかすめた瞬間に出てしまい
   *     演出として認識されにくい。逆に高すぎると大きい要素が
   *     画面に収まらず発火しないため、視認と確実な発火のバランスで 0.15 とする。
   * - rootMargin: "0px 0px -10% 0px"
   *     ビューポート下端を 10% 内側に詰めて判定する。要素が画面の
   *     やや上に入ってから出現させることで、スクロールに対して
   *     自然なタイミングになる（下端ギリギリでの発火を避ける）。
   */
  const observer = new IntersectionObserver(
    function (entries, obs) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;

        reveal(entry.target);

        // ワンショット表示: 一度表示したら監視を解除する。
        // これにより再交差時の多重発火を防ぎ、不要な監視も止める。
        obs.unobserve(entry.target);
      });
    },
    {
      threshold: 0.15,
      rootMargin: "0px 0px -10% 0px",
    }
  );

  // 全対象を監視に登録
  targets.forEach(function (el) {
    observer.observe(el);
  });
})();