背景画像リビール・ヒーロー

背景写真がゆっくりズーム（Ken Burns）し、その上で見出しがクリップで切り開かれるように現れる没入型ヒーロー。暗幕オーバーレイで可読性を確保。旅行・飲食・イベント系に好相性です。

#hero#title#image#ken-burns

ライブデモ

使用例（お題: カフェ MOON BREW）

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

HTML

<!-- MOON BREW：背景写真ズーム＋見出しリビールのカフェヒーロー -->
<section class="tir">
  <div class="tir-bg" aria-hidden="true">
    <img class="tir-img" src="https://picsum.photos/id/1060/1100/680" alt="" referrerpolicy="no-referrer" onerror="this.remove()">
  </div>
  <div class="tir-overlay" aria-hidden="true"></div>

  <div class="tir-inner">
    <p class="tir-kicker">SINCE 2019 · OPEN 18:00</p>
    <h1 class="tir-title"><span class="tir-clip">夜にひらく、珈琲店</span></h1>
    <p class="tir-sub">深夜焙煎の一杯と、静かな時間を。今月のシングルオリジンを店頭・オンラインで。</p>
    <button class="tir-btn" type="button">今月の豆を見る →</button>
  </div>
</section>

CSS

/* MOON BREW（カフェ）：背景画像リビール・ヒーローの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Mincho ProN", "Segoe UI", serif; }

.tir { position: relative; width: 100%; min-height: 380px; display: grid; align-content: center; padding: 40px 40px; overflow: hidden; color: #fff; }

.tir-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #2a1a10, #4a2c16 70%, #1a0f08); }
.tir-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transform-origin: 60% 40%; animation: tir-kb 14s ease-in-out infinite alternate; }
@keyframes tir-kb { from { transform: scale(1.12) translate(0,0); } to { transform: scale(1.24) translate(-2%,-3%); } }
.tir-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,12,6,.82) 0%, rgba(20,12,6,.5) 55%, rgba(20,12,6,.18) 100%); }

.tir-inner { position: relative; z-index: 2; max-width: 440px; }
.tir-kicker { font-family: "Segoe UI", sans-serif; margin: 0 0 16px; font-size: 11px; letter-spacing: .26em; color: rgba(255,231,205,.82); font-weight: 700; }
.tir-title { margin: 0; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
.tir-clip { display: inline-block; clip-path: inset(0 100% 0 0); animation: tir-reveal 1s cubic-bezier(.76,0,.24,1) .25s forwards; }
@keyframes tir-reveal { to { clip-path: inset(0 0 0 0); } }
.tir-sub { font-family: "Segoe UI", sans-serif; margin: 18px 0 24px; font-size: 14px; line-height: 1.8; color: rgba(255,243,230,.85); opacity: 0; animation: tir-fade .8s ease 1s forwards; }
.tir-btn { font-family: "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(255,231,205,.6); background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(4px); opacity: 0; animation: tir-fade .8s ease 1.15s forwards; transition: background .2s ease; }
.tir-btn:hover { background: rgba(255,255,255,.2); }
@keyframes tir-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .tir-img { animation: none; } .tir-clip { animation: none; clip-path: none; } .tir-sub, .tir-btn { animation: none; opacity: 1; } }

実装ガイド

使いどころ

旅行・飲食・イベント・ブランドなど、写真の力で没入させたいヒーローに。背景写真がゆっくりズーム（Ken Burns）し、見出しがクリップで切り開かれるように現れます。

実装時の注意点

背景は object-fit:cover の画像を scale＋translate で往復ズーム。見出しは clip-path: inset(0 100% 0 0)→inset(0) で左から開きます。手前に左濃→右薄の暗幕グラデを敷いて白文字の可読性を確保。画像が読めない場合に備え、背景要素自体にグラデを持たせフォールバックします。

対応ブラウザ

object-fit・clip-path・transform アニメーションは全モダンブラウザで対応します。画像取得に失敗しても onerror で除去し、下地のグラデで成立します。

よくある失敗

暗幕が薄いと明るい写真で文字が沈むため、見出し側にも text-shadow を保険で。Ken Burns の移動量が大きいと写真の端が見切れて不自然になります。重い高解像度画像はモバイルで遅いので、適切なサイズと遅延読み込みを。

応用例

複数画像のクロスフェード、スクロール量に応じたズーム、見出しを行ごとに時間差リビール、動画背景への置き換えなどに展開できます。

コード