パーツ番号 02-01-29 ・ CSSのみ

スケール展開見出し

文字が縦につぶれた状態からスクロールで通常の高さまで伸び上がる見出し。ミニマルなブランドサイトやプロダクト紹介ページの導入見出しに。

scrollcss

プレビュー

ソースコード

HTML

<h4 class="d02-01-29-h io-reveal">静けさの中の、強さ。</h4>

CSS

.d02-01-29 .d02-01-29-h{
          display:inline-block;
          font-size:30px;
          font-weight:800;
          color:#1a2333;
          letter-spacing:.04em;
          transform:scaleY(.08);
          transform-origin:center center;
          opacity:0;
          transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .5s ease;
        }
        .d02-01-29 .d02-01-29-h.is-in{
          transform:scaleY(1);
          opacity:1;
        }

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