パーツ番号 01-01-11 ・ CSSのみ

スプリットスライドインヒーロー

左右2枚のパネルが開閉を繰り返し、その度に見出しがふわっと現れる自動ループ演出。WordPressのブランドサイトの導入部で強い第一印象を残せます。

autocss

プレビュー

ソースコード

HTML

<div class="d01-01-11-hero">
          <div class="d01-01-11-panel d01-01-11-left"></div>
          <div class="d01-01-11-panel d01-01-11-right"></div>
          <div class="d01-01-11-inner">
            <h1>境界を、超えていく。</h1>
            <p>左右の壁がひらき、隠れていた可能性が姿を現します。</p>
          </div>
        </div>

CSS

.prev.d01-01-11{padding:0;display:block;min-height:320px}
        .d01-01-11-hero{position:relative;height:320px;overflow:hidden;background:#141824;display:flex;align-items:center;justify-content:center}
        .d01-01-11-panel{position:absolute;top:0;bottom:0;width:52%}
        .d01-01-11-left{left:0;background:linear-gradient(135deg,#1b2a4a,#25406e);animation:d01-01-11-openL 7s ease-in-out infinite}
        .d01-01-11-right{right:0;background:linear-gradient(135deg,#2b1b4a,#4a2570);animation:d01-01-11-openR 7s ease-in-out infinite}
        @keyframes d01-01-11-openL{0%,10%{transform:translateX(0)}35%,75%{transform:translateX(-102%)}95%,100%{transform:translateX(0)}}
        @keyframes d01-01-11-openR{0%,10%{transform:translateX(0)}35%,75%{transform:translateX(102%)}95%,100%{transform:translateX(0)}}
        .d01-01-11-inner{position:relative;z-index:1;text-align:center;padding:24px;opacity:0;animation:d01-01-11-fade 7s ease-in-out infinite}
        @keyframes d01-01-11-fade{0%,15%{opacity:0}40%,70%{opacity:1}90%,100%{opacity:0}}
        .d01-01-11-hero h1{color:#fff;font-size:24px;font-weight:700;letter-spacing:.06em;margin:0 0 12px}
        .d01-01-11-hero p{color:rgba(255,255,255,.8);font-size:12.5px;line-height:1.9;margin:0}

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