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

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

スクロールで画面に入ると、文字から離れた位置にあった下線が、h2から順に時間差をつけて文字へ近づくように詰まっていく。text-underline-offsetのアニメーションだけで構成しているので、ブログ本文にも軽く馴染む。

scrollcss

プレビュー

ソースコード

HTML

<div class="set io-reveal">
          <p class="lv2">ブログ</p>
          <p class="lv3">制作の裏側</p>
          <p class="lv4">使用したツール</p>
        </div>

CSS

.d02-17-21 .set{ width:100%; display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
        .d02-17-21 .lv2{ margin:0; font-size:23px; font-weight:800; color:#7c2d12; line-height:1.4; text-decoration:underline; text-decoration-color:#fb923c; text-decoration-thickness:3px; text-underline-offset:22px; transition:text-underline-offset .8s cubic-bezier(.22,1,.36,1); }
        .d02-17-21 .lv3{ margin:0; font-size:18px; font-weight:700; color:#9a3412; line-height:1.4; text-decoration:underline; text-decoration-color:#fdba74; text-decoration-thickness:2px; text-underline-offset:22px; transition:text-underline-offset .8s cubic-bezier(.22,1,.36,1) .18s; }
        .d02-17-21 .lv4{ margin:0; font-size:14px; font-weight:700; color:#a16207; line-height:1.4; text-decoration:underline; text-decoration-color:#fed7aa; text-decoration-thickness:1px; text-underline-offset:22px; transition:text-underline-offset .8s cubic-bezier(.22,1,.36,1) .36s; }
        .d02-17-21 .set.is-in .lv2{ text-underline-offset:11px; }
        .d02-17-21 .set.is-in .lv3{ text-underline-offset:7px; }
        .d02-17-21 .set.is-in .lv4{ text-underline-offset:3px; }

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