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

下線シーケンス見出しセット

スクロールで表示されると、h2・h3・h4それぞれの下線が左から右へ、太い順に時間差で伸びていく。3本の線が少しずつタイミングをずらして完成するので、読み進める順番を自然に誘導できる。

scrollcss

プレビュー

ソースコード

HTML

<div class="set io-reveal">
          <p class="lv2">会社案内</p>
          <p class="lv3">事業内容</p>
          <p class="lv4">沿革</p>
        </div>

CSS

.d02-17-02 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-02 .lv2{ margin:0; position:relative; font-size:24px; font-weight:800; color:#134e4a; line-height:1.4; padding-bottom:10px; }
        .d02-17-02 .lv3{ margin:0; position:relative; font-size:18px; font-weight:700; color:#115e59; line-height:1.4; padding-bottom:8px; padding-left:14px; }
        .d02-17-02 .lv4{ margin:0; position:relative; font-size:14px; font-weight:700; color:#64748b; line-height:1.4; padding-bottom:6px; padding-left:28px; }
        .d02-17-02 .lv2::after,
        .d02-17-02 .lv3::after,
        .d02-17-02 .lv4::after{ content:""; position:absolute; left:0; bottom:0; width:100%; transform:scaleX(0); transform-origin:left center; transition:transform .8s cubic-bezier(.22,1,.36,1); }
        .d02-17-02 .lv2::after{ height:4px; background:#0d9488; }
        .d02-17-02 .lv3::after{ height:3px; background:#2dd4bf; left:14px; width:calc(100% - 14px); transition-delay:.15s; }
        .d02-17-02 .lv4::after{ height:2px; background:#99f6e4; left:28px; width:calc(100% - 28px); transition-delay:.3s; }
        .d02-17-02 .set.is-in .lv2::after,
        .d02-17-02 .set.is-in .lv3::after,
        .d02-17-02 .set.is-in .lv4::after{ transform:scaleX(1); }

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