サムネ自動スクロールプレビュー

カードにカーソルを乗せると、サムネイルの中でページ全体がするすると下までスクロールして見せてくれます。ギャラリーサイトやポートフォリオ一覧で、クリック前に中身を伝える定番の魅せUIです。

#thumbnail#preview#auto-scroll#card

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk: テンプレート一覧。カーソルを乗せると中身を下までプレビュー -->
<div class="stage" aria-label="FlowDeskのテンプレート3枚">

  <article class="thumb" data-thumb>
    <div class="viewport">
      <div class="page">
        <div class="hero" style="background:linear-gradient(135deg,#4D7CFE,#7AA0FF)">
          <img src="https://picsum.photos/seed/flowdesk-tpl-1/560/320" alt="" loading="lazy">
        </div>
        <div class="bar title"></div>
        <div class="bar t"></div><div class="bar t"></div><div class="bar t short"></div>
        <div class="imgs">
          <div class="ph" style="background:linear-gradient(135deg,#4ED1A1,#4D7CFE)"><img src="https://picsum.photos/seed/flowdesk-tpl-1a/260/180" alt="" loading="lazy"></div>
          <div class="ph" style="background:linear-gradient(135deg,#9B6BFF,#4D7CFE)"><img src="https://picsum.photos/seed/flowdesk-tpl-1b/260/180" alt="" loading="lazy"></div>
        </div>
        <div class="bar t"></div><div class="bar t"></div><div class="bar t short"></div>
        <div class="foot" style="background:#4D7CFE"></div>
      </div>
    </div>
    <span class="cap">DASHBOARD</span>
  </article>

  <article class="thumb" data-thumb>
    <div class="viewport">
      <div class="page">
        <div class="hero" style="background:linear-gradient(135deg,#4ED1A1,#4D7CFE)">
          <img src="https://picsum.photos/seed/flowdesk-tpl-2/560/320" alt="" loading="lazy">
        </div>
        <div class="bar title"></div>
        <div class="bar t"></div><div class="bar t short"></div><div class="bar t"></div>
        <div class="imgs">
          <div class="ph" style="background:linear-gradient(135deg,#4D7CFE,#9B6BFF)"><img src="https://picsum.photos/seed/flowdesk-tpl-2a/260/180" alt="" loading="lazy"></div>
          <div class="ph" style="background:linear-gradient(135deg,#4ED1A1,#7AA0FF)"><img src="https://picsum.photos/seed/flowdesk-tpl-2b/260/180" alt="" loading="lazy"></div>
        </div>
        <div class="bar t"></div><div class="bar t"></div><div class="bar t short"></div>
        <div class="foot" style="background:#4ED1A1"></div>
      </div>
    </div>
    <span class="cap">KANBAN</span>
  </article>

  <article class="thumb" data-thumb>
    <div class="viewport">
      <div class="page">
        <div class="hero" style="background:linear-gradient(135deg,#9B6BFF,#4D7CFE)">
          <img src="https://picsum.photos/seed/flowdesk-tpl-3/560/320" alt="" loading="lazy">
        </div>
        <div class="bar title"></div>
        <div class="bar t"></div><div class="bar t"></div><div class="bar t short"></div>
        <div class="imgs">
          <div class="ph" style="background:linear-gradient(135deg,#4D7CFE,#4ED1A1)"><img src="https://picsum.photos/seed/flowdesk-tpl-3a/260/180" alt="" loading="lazy"></div>
          <div class="ph" style="background:linear-gradient(135deg,#7AA0FF,#9B6BFF)"><img src="https://picsum.photos/seed/flowdesk-tpl-3b/260/180" alt="" loading="lazy"></div>
        </div>
        <div class="bar t short"></div><div class="bar t"></div><div class="bar t"></div>
        <div class="foot" style="background:#9B6BFF"></div>
      </div>
    </div>
    <span class="cap">REPORT</span>
  </article>

</div>

CSS

:root{
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #eef3ff; }

.stage {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 22px; width: 100%; min-height: 100vh; max-height: 100%; padding: 24px;
  background: linear-gradient(180deg, #f5f8ff 0%, #e6eefb 100%);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.thumb {
  position: relative; width: 280px; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 18px rgba(28,46,90,.12);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
.thumb:hover, .thumb.hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(28,46,90,.22); }

.viewport { height: 180px; overflow: hidden; border-radius: 12px 12px 0 0; }
.page { display: flex; flex-direction: column; min-height: 720px; padding-bottom: 16px; background: #fff; transform: translateY(0); }
.thumb:hover .page, .thumb.hover .page { animation: scroll 3.7s linear 1 forwards; }

.hero { position: relative; height: 160px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bar { margin: 10px 16px 0; height: 9px; border-radius: 5px; background: #dce6f7; }
.bar.title { height: 16px; width: 60%; background: #c2d2ee; margin-top: 16px; }
.bar.t { width: 88%; }
.bar.t.short { width: 54%; }

.imgs { display: flex; gap: 10px; margin: 14px 16px 4px; }
.ph { position: relative; flex: 1; height: 90px; border-radius: 8px; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foot { height: 64px; margin: 16px 0 0; }

.cap {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #1b2a4a;
  background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 6px;
}

@keyframes scroll {
  0%    { transform: translateY(0);      animation-timing-function: linear; }
  75.7% { transform: translateY(-540px); animation-timing-function: linear; }
  86.5% { transform: translateY(-540px); animation-timing-function: var(--ease-inout); }
  100%  { transform: translateY(0); }
}

JavaScript

// hoverはCSS。疑似hoverを順番に回し、画像の読み込み失敗を補う（デモと同じロジック）。
(() => {
  const cards = [...document.querySelectorAll('[data-thumb]')];
  if (!cards.length) return;
  document.querySelectorAll('img').forEach(img => {
    img.addEventListener('error', () => { img.style.display = 'none'; });
  });
  let i = 0;
  const cycle = () => {
    const card = cards[i % cards.length];
    card.classList.add('hover');
    setTimeout(() => card.classList.remove('hover'), 3700);
    i++;
  };
  cycle();
  setInterval(cycle, 4200);
})();

実装ガイド

使いどころ

ギャラリーやポートフォリオ、テンプレート一覧で、クリック前に中身を伝えたいときに。サムネ内でページ全体を見せる定番の魅せUIです。

実装時の注意点

縦長スクショは用意せず、カード内にCSSで疑似ページ（hero/見出しバー/画像/フッター）を組み、hoverで内部をtranslateYスクロールします。スクロール区間は必ずlinear、戻りだけイージング。疑似hoverを巡回させ、実hoverでも同じクラスで動かします。画像はonerrorでグラデにフォールバック。

対応ブラウザ

CSS animation/transform・overflow:hiddenは全モダンブラウザで安定動作します。hover前提のためタッチではタップやアニメ自動再生にフォールバックを入れ、対応は実機で確認してください。

よくある失敗

スクロール部にlinear以外を使うと等速感が消えます。ページ高さが窓＋移動量より低いとフッターまで出ません。画像未読込のチラつきはグラデ下地で回避します。

応用例

疑似ページを実スクショ画像に差し替える、hoverズームや影で奥行き、クリックで詳細へ遷移、ニュース一覧のプレビューなどに発展できます。

コード