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

順次フェードインヒーロー

見出し・サブテキスト・CTAが時間差でふわっと立ち上がる王道の演出。WordPressのトップページのファーストビューにそのまま使えます。

css

プレビュー

ソースコード

HTML

<div class="d01-01-01-hero">
          <div class="d01-01-01-inner">
            <h1 class="io-reveal">未来をつくる、Webの力。</h1>
            <p class="io-reveal">アイデアをかたちに変える、次世代のデジタル体験をあなたのビジネスへ。</p>
            <a href="#" class="d01-01-01-btn io-reveal" onclick="return false;">無料で相談する</a>
          </div>
        </div>

CSS

.prev.d01-01-01{padding:0;display:block;min-height:320px}
        .d01-01-01-hero{height:320px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a2a4a 0%,#2d4a7a 100%);text-align:center}
        .d01-01-01-inner{padding:24px;max-width:90%}
        .d01-01-01-hero h1{color:#fff;font-size:26px;font-weight:700;letter-spacing:.05em;margin:0 0 14px}
        .d01-01-01-hero p{color:rgba(255,255,255,.8);font-size:13px;line-height:1.9;margin:0 0 22px}
        .d01-01-01-btn{display:inline-block;padding:12px 34px;border-radius:999px;background:#ffb347;color:#1a2a4a;font-size:13px;font-weight:700;text-decoration:none;transition:opacity .3s}
        .d01-01-01-btn:hover{opacity:.85}
        .d01-01-01-hero .io-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
        .d01-01-01-hero .io-reveal.is-in{opacity:1;transform:translateY(0)}
        .d01-01-01-hero p.io-reveal{transition-delay:.25s}
        .d01-01-01-hero .d01-01-01-btn.io-reveal{transition-delay:.5s}

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