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

スケールインシーケンス見出しセット

画面に入ると0.7倍に縮んでいた3レベルが、h2から順に時間差をつけながら等倍まで拡大する。同じ動きを繰り返すだけの単純な演出だが、時間差があることで階層の主従がはっきり伝わる。

scrollcss

プレビュー

ソースコード

HTML

<div class="set io-reveal">
          <p class="lv2">商品ラインナップ</p>
          <p class="lv3">季節限定アイテム</p>
          <p class="lv4">在庫状況について</p>
        </div>

CSS

.d02-17-14 .set{ width:100%; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
        .d02-17-14 .lv2{ margin:0; font-size:24px; font-weight:800; color:#0c4a6e; line-height:1.4; opacity:0; transform:scale(.7); transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .5s ease; }
        .d02-17-14 .lv3{ margin:0; font-size:18px; font-weight:700; color:#075985; line-height:1.4; opacity:0; transform:scale(.7); transition:transform .55s cubic-bezier(.34,1.56,.64,1) .15s, opacity .5s ease .15s; }
        .d02-17-14 .lv4{ margin:0; font-size:14px; font-weight:700; color:#0284c7; line-height:1.4; opacity:0; transform:scale(.7); transition:transform .55s cubic-bezier(.34,1.56,.64,1) .3s, opacity .5s ease .3s; }
        .d02-17-14 .set.is-in .lv2,
        .d02-17-14 .set.is-in .lv3,
        .d02-17-14 .set.is-in .lv4{ opacity:1; transform:scale(1); }

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