パーツ番号 02-17-06 ・ CSSのみ

帯スライド見出しセット

スクロールで表示されると、各レベルの背後にある色帯が左から右へ伸び、その直後に文字が重なって浮かび上がる。3本の帯が時間差で敷かれていくので、料金表の見出しにメリハリが出る。

scrollcss

プレビュー

ソースコード

HTML

<div class="set io-reveal">
          <p class="lv2">料金プラン</p>
          <p class="lv3">スタンダードプラン</p>
          <p class="lv4">エンタープライズプラン</p>
        </div>

CSS

.d02-17-06 .set{ width:100%; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
        .d02-17-06 .lv2,.d02-17-06 .lv3,.d02-17-06 .lv4{ margin:0; position:relative; padding:8px 16px; overflow:hidden; }
        .d02-17-06 .lv2::before,.d02-17-06 .lv3::before,.d02-17-06 .lv4::before{ content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:left center; transition:transform .7s cubic-bezier(.22,1,.36,1); z-index:-1; }
        .d02-17-06 .lv2{ font-size:22px; font-weight:800; color:#065f46; transition:color .35s ease .45s; }
        .d02-17-06 .lv2::before{ background:#065f46; }
        .d02-17-06 .lv3{ font-size:17px; font-weight:700; color:#065f46; }
        .d02-17-06 .lv3::before{ background:#a7f3d0; transition-delay:.18s; }
        .d02-17-06 .lv4{ font-size:14px; font-weight:700; color:#065f46; }
        .d02-17-06 .lv4::before{ background:#d1fae5; transition-delay:.36s; }
        .d02-17-06 .set.is-in .lv2{ color:#fff; }
        .d02-17-06 .set.is-in .lv2::before,
        .d02-17-06 .set.is-in .lv3::before,
        .d02-17-06 .set.is-in .lv4::before{ transform:scaleX(1); }

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