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

複数シーンがクロスフェードするヒーロー

3枚のグラデーションシーンが順番にフェードして切り替わる背景演出。WordPressの企業サイトやホテル・観光サイトのメインビジュアルに動きと物語性を持たせられる。

css

プレビュー

ソースコード

HTML

<div class="d07-10-05-scene d07-10-05-s1"></div>
        <div class="d07-10-05-scene d07-10-05-s2"></div>
        <div class="d07-10-05-scene d07-10-05-s3"></div>
        <div class="d07-10-05-content">
          <h4>Our Story</h4>
          <p>移り変わる情景でブランドの世界観を演出</p>
        </div>

CSS

.d07-10-05{background:#0f172a}
        .d07-10-05-scene{position:absolute;inset:0;opacity:0;animation:d1335fade 12s ease-in-out infinite}
        .d07-10-05-s1{background:linear-gradient(135deg,#7c2d12,#c2410c);animation-delay:0s}
        .d07-10-05-s2{background:linear-gradient(135deg,#1e3a8a,#0ea5e9);animation-delay:4s}
        .d07-10-05-s3{background:linear-gradient(135deg,#134e4a,#059669);animation-delay:8s}
        .d07-10-05-content{position:relative;z-index:1;text-align:center;color:#fff}
        .d07-10-05-content h4{margin:0;font-size:22px;font-weight:800;text-shadow:0 3px 12px rgba(0,0,0,.4)}
        .d07-10-05-content p{margin:6px 0 0;font-size:11px;opacity:.85}
        @keyframes d1335fade{0%{opacity:0}8%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-05-scene{animation:none;opacity:0}
          .d07-10-05-s1{opacity:1}
        }

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