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

グラデーションスイープ確定見出しセット

スクロールで画面に入ると、薄いグレーだった文字の上を左から右へ帯グラデーションが通過し、直後に本来の濃い色へ確定する。h2から順に少しずつ遅れて再生されるので、雑誌風のブログ記事見出しに華やかさが出る。

scrollcss

プレビュー

ソースコード

HTML

<div class="set io-reveal">
          <p class="lv2">特集記事</p>
          <p class="lv3">季節のおすすめ</p>
          <p class="lv4">編集部より</p>
        </div>

CSS

.d02-17-27 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-27 .lv2,.d02-17-27 .lv3,.d02-17-27 .lv4{ margin:0; position:relative; color:#d4d4d8; transition:color .3s ease .7s; }
        .d02-17-27 .lv2::after,.d02-17-27 .lv3::after,.d02-17-27 .lv4::after{ content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(90deg,transparent,#a855f7,transparent); opacity:0; }
        .d02-17-27 .lv2{ font-size:22px; font-weight:800; }
        .d02-17-27 .lv3{ font-size:17px; font-weight:700; padding-left:14px; }
        .d02-17-27 .lv4{ font-size:14px; font-weight:700; padding-left:28px; }
        .d02-17-27 .set.is-in .lv2{ color:#6b21a8; }
        .d02-17-27 .set.is-in .lv3{ color:#7e22ce; transition-delay:.9s; }
        .d02-17-27 .set.is-in .lv4{ color:#9333ea; transition-delay:1.1s; }
        .d02-17-27 .set.is-in .lv2::after{ animation:d02-17-27-sweep .7s ease forwards; }
        .d02-17-27 .set.is-in .lv3::after{ animation:d02-17-27-sweep .7s ease forwards .2s; }
        .d02-17-27 .set.is-in .lv4::after{ animation:d02-17-27-sweep .7s ease forwards .4s; }
        @keyframes d02-17-27-sweep{ 0%{ left:-40%; opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }

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