Scroll Story UIの作り方｜スクロール連動で内容が切り替わるUI

<section class="scroll-story">
  <div class="story-shell">
    <div class="story-pin">
      <div class="story-display">
        <p class="story-label">Scroll Story UI</p>
        <h2 class="story-title">STEP 1</h2>
        <p class="story-text">
          最初の導入メッセージです。スクロールに合わせて内容が切り替わります。
        </p>

        <div class="story-panels">
          <div class="story-panel is-active" data-panel="1">01</div>
          <div class="story-panel" data-panel="2">02</div>
          <div class="story-panel" data-panel="3">03</div>
          <div class="story-panel" data-panel="4">04</div>
        </div>
      </div>
    </div>

    <div class="story-steps">
      <article class="story-step is-active" data-step="1">
        <span class="step-kicker">STEP 1</span>
        <h3>導入で興味を引く</h3>
        <p>
          最初のステップでは、何について説明するUIなのかを短く伝えます。
          ここで読む理由が伝わると、次のステップにも進みやすくなります。
        </p>
      </article>

      <article class="story-step" data-step="2">
        <span class="step-kicker">STEP 2</span>
        <h3>特徴を整理して見せる</h3>
        <p>
          2つ目のステップでは、機能や特徴を分かりやすく提示します。
          テキストだけでなく、左側の表示を連動させることで理解しやすくなります。
        </p>
      </article>

      <article class="story-step" data-step="3">
        <span class="step-kicker">STEP 3</span>
        <h3>変化を視覚で補強する</h3>
        <p>
          スクロールに応じて表示が切り替わると、ユーザーは今どこを読んでいるかを把握しやすくなります。
          情報を段階的に見せたいときに有効です。
        </p>
      </article>

      <article class="story-step" data-step="4">
        <span class="step-kicker">STEP 4</span>
        <h3>最後に印象をまとめる</h3>
        <p>
          最終ステップでは、全体のまとめや行動導線を置くと相性が良いです。
          単なる説明で終わらず、次のアクションにつなげやすくなります。
        </p>
      </article>
    </div>
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #0f1115;
  color: #f5f7fb;
}

.scroll-story {
  padding: 80px 20px;
}

.story-shell {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.story-pin {
  position: relative;
}

.story-display {
  position: sticky;
  top: 80px;
  min-height: 420px;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(180deg, #181d27 0%, #12161d 100%);
  border: 1px solid rgba(255,255,255,0.08);
}

.story-label {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ea3ff;
}

.story-title {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.1;
}

.story-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.8);
  max-width: 32ch;
}

.story-panels {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.story-panel {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  transition: 0.3s ease;
}

.story-panel.is-active {
  background: #8ea3ff;
  color: #10131a;
  transform: translateY(-4px);
}

.story-steps {
  display: grid;
  gap: 24px;
}

.story-step {
  min-height: 72vh;
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.45;
  transform: scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-step.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(142,163,255,0.6);
}

.step-kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ea3ff;
}

.story-step h3 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.3;
}

.story-step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,0.8);
}

@media (max-width: 900px) {
  .story-shell {
    grid-template-columns: 1fr;
  }

  .story-display {
    position: static;
    min-height: auto;
  }

  .story-step {
    min-height: auto;
  }
}

<script>
  const steps = document.querySelectorAll('.story-step');
  const panels = document.querySelectorAll('.story-panel');
  const title = document.querySelector('.story-title');
  const text = document.querySelector('.story-text');

  const contentMap = {
    1: {
      title: 'STEP 1',
      text: '最初の導入メッセージです。スクロールに合わせて内容が切り替わります。'
    },
    2: {
      title: 'STEP 2',
      text: '特徴を整理して見せるステップです。左側の表示も連動して変化します。'
    },
    3: {
      title: 'STEP 3',
      text: '視覚の変化を加えることで、今どの話を読んでいるかが分かりやすくなります。'
    },
    4: {
      title: 'STEP 4',
      text: '最後のまとめや導線設計にも使いやすいのが、Scroll Story UIの良いところです。'
    }
  };

  function setActiveStep(stepNumber) {
    steps.forEach(step => {
      step.classList.toggle('is-active', step.dataset.step === String(stepNumber));
    });

    panels.forEach(panel => {
      panel.classList.toggle('is-active', panel.dataset.panel === String(stepNumber));
    });

    title.textContent = contentMap[stepNumber].title;
    text.textContent = contentMap[stepNumber].text;
  }

  function updateActiveStep() {
    let closestStep = null;
    let closestDistance = Infinity;

    steps.forEach(step => {
      const rect = step.getBoundingClientRect();
      const stepCenter = rect.top + rect.height / 2;
      const viewportCenter = window.innerHeight / 2;
      const distance = Math.abs(stepCenter - viewportCenter);

      if (distance < closestDistance) {
        closestDistance = distance;
        closestStep = step;
      }
    });

    if (closestStep) {
      setActiveStep(closestStep.dataset.step);
    }
  }

  window.addEventListener('scroll', updateActiveStep);
  window.addEventListener('resize', updateActiveStep);
  updateActiveStep();
</script>