Scroll Snap Animationで気持ちよく止まるUIを作る方法【CSS中心で実装】

<section class="snap-demo">
  <div class="snap-header">
    <p class="eyebrow">Scroll Snap Animation</p>
    <h2>カードがぴたっと揃う横スクロールUI</h2>
    <p class="lead">
      横にスクロールすると、カードが中途半端な位置で止まらず、
      1枚ずつ気持ちよく揃います。
    </p>
  </div>

  <div class="snap-track" id="snapTrack">
    <article class="snap-card">
      <span class="num">01</span>
      <h3>Welcome</h3>
      <p>スクロールに合わせてカードが吸い付くように止まる基本デモです。</p>
    </article>

    <article class="snap-card">
      <span class="num">02</span>
      <h3>Smooth Layout</h3>
      <p>中途半端な位置で止まらないので、一覧UIが整って見えやすくなります。</p>
    </article>

    <article class="snap-card">
      <span class="num">03</span>
      <h3>Touch Friendly</h3>
      <p>スマホのスワイプ操作とも相性が良く、自然な体験を作りやすいです。</p>
    </article>

    <article class="snap-card">
      <span class="num">04</span>
      <h3>Minimal JS</h3>
      <p>基本はCSSだけで成立するので、実装コストを抑えやすいのも魅力です。</p>
    </article>

    <article class="snap-card">
      <span class="num">05</span>
      <h3>UI Pattern</h3>
      <p>チュートリアル、機能紹介、ギャラリーなど幅広い場面で使えます。</p>
    </article>
  </div>

  <div class="snap-controls">
    <button type="button" id="prevBtn">Prev</button>
    <button type="button" id="nextBtn">Next</button>
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, rgba(120, 255, 210, 0.08), transparent 35%),
    linear-gradient(180deg, #0d1016 0%, #111827 100%);
  color: #eef2ff;
}

.snap-demo {
  width: min(1100px, calc(100% - 32px));
  margin: 64px auto;
}

.snap-header {
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8ef0c9;
}

.snap-header h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}

.lead {
  margin: 12px 0 0;
  max-width: 720px;
  color: #cbd5e1;
  line-height: 1.7;
}

.snap-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 420px);
  gap: 16px;
  overflow-x: auto;
  padding: 8px 8px 20px;
  margin-top: 28px;

  scroll-snap-type: x mandatory;
  scroll-padding-left: 8px;
  scroll-behavior: smooth;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}

.snap-track::-webkit-scrollbar {
  height: 10px;
}

.snap-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.24);
  border-radius: 999px;
}

.snap-card {
  min-height: 260px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.snap-card .num {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #8ef0c9;
}

.snap-card h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.snap-card p {
  margin: 0;
  line-height: 1.75;
  color: #dbe4f0;
}

.snap-controls {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.snap-controls button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  color: #0f172a;
  background: #8ef0c9;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.snap-controls button:hover {
  transform: translateY(-1px);
}

.snap-controls button:active {
  transform: translateY(1px) scale(0.98);
}

@media (max-width: 640px) {
  .snap-demo {
    width: min(100% - 20px, 1100px);
    margin: 40px auto;
  }

  .snap-track {
    grid-auto-columns: 88%;
    gap: 12px;
  }

  .snap-card {
    min-height: 220px;
    padding: 20px;
    border-radius: 20px;
  }
}

<script>
  const track = document.getElementById("snapTrack");
  const cards = Array.from(track.children);
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");

  function getCurrentIndex() {
    const trackLeft = track.getBoundingClientRect().left;

    let closestIndex = 0;
    let closestDistance = Infinity;

    cards.forEach((card, index) => {
      const cardLeft = card.getBoundingClientRect().left;
      const distance = Math.abs(cardLeft - trackLeft - 8);

      if (distance < closestDistance) {
        closestDistance = distance;
        closestIndex = index;
      }
    });

    return closestIndex;
  }

  function scrollToCard(index) {
    const safeIndex = Math.max(0, Math.min(index, cards.length - 1));
    cards[safeIndex].scrollIntoView({
      behavior: "smooth",
      inline: "start",
      block: "nearest"
    });
  }

  prevBtn.addEventListener("click", () => {
    scrollToCard(getCurrentIndex() - 1);
  });

  nextBtn.addEventListener("click", () => {
    scrollToCard(getCurrentIndex() + 1);
  });
</script>

.snap-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.snap-card {
  scroll-snap-align: start;
}

.snap-card {
  scroll-snap-stop: always;
}

grid-auto-columns: min(82%, 420px);

padding: 8px 8px 20px;
scroll-padding-left: 8px;