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

字間クローズ見出し

表示時に広がった文字間隔が自然な間隔へすっと閉じていく見出し。ブランドコンセプトページやスライド区切りのタイトルに上品な余韻を。

scrollcss

プレビュー

ソースコード

HTML

<h4 class="d02-01-25-h io-reveal">CONCEPT</h4>

CSS

.d02-01-25 .d02-01-25-h{
          font-size:30px;
          font-weight:800;
          color:#1a2333;
          letter-spacing:.9em;
          opacity:0;
          transition:letter-spacing 1.1s cubic-bezier(.22,1,.36,1), opacity .8s ease;
        }
        .d02-01-25 .d02-01-25-h.is-in{
          letter-spacing:.08em;
          opacity:1;
        }

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