パーツ番号 07-10-04 ・ CSSのみ

スクロールで動画背景→静止画に切替

スクロールで画面に入ると動く背景が静止画にクロスフェードする演出。WordPressのランディングページで、途中から表示負荷の軽い静止画に切り替えたい場合に使える。

scrollcss

プレビュー

ソースコード

HTML

<div class="d07-10-04-outer">
          <div class="d07-10-04-wrap io-reveal">
            <div class="d07-10-04-video"></div>
            <div class="d07-10-04-photo"></div>
            <span class="d07-10-04-badge">SCROLL</span>
          </div>
          <p class="d07-10-04-label">背景動画 → 静止画</p>
        </div>

CSS

.d07-10-04-outer{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d07-10-04-wrap{position:relative;width:220px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.25)}
        .d07-10-04-video,.d07-10-04-photo{position:absolute;inset:0;transition:opacity 1s ease}
        .d07-10-04-video{background:linear-gradient(120deg,#4c1d95,#0ea5e9,#4c1d95);background-size:260% 260%;animation:d1334move 10s ease-in-out infinite;opacity:1}
        .d07-10-04-photo{background:linear-gradient(135deg,#1e293b,#334155);opacity:0}
        .d07-10-04-badge{position:absolute;top:8px;left:8px;font-size:9px;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.4);padding:2px 8px;border-radius:99px;transition:opacity .5s ease}
        .d07-10-04-wrap.is-in .d07-10-04-video{opacity:0}
        .d07-10-04-wrap.is-in .d07-10-04-photo{opacity:1}
        .d07-10-04-wrap.is-in .d07-10-04-badge{opacity:0}
        .d07-10-04-label{margin:0;font-size:11px;color:#94a3b8}
        @keyframes d1334move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-04-video{animation:none;background-position:50% 50%}
          .d07-10-04-video,.d07-10-04-photo,.d07-10-04-badge{transition:none}
        }

クラス名 .d07-10-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。