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

シャドウキャッチアップ見出し

スクロールで表示されると、見出しの下に落ちていた影だけが追いつくように本体へ近づく演出。ミニマルなコーポレートサイトの中見出しに奥行きを加えます。

scrollcss3d

プレビュー

ソースコード

HTML

<h4 class="d02-01-40-h io-reveal">光を、追いかけて。</h4>

CSS

.d02-01-40 .d02-01-40-h{
          font-size:28px;
          font-weight:800;
          letter-spacing:.05em;
          color:#1a2333;
          text-shadow:0 22px 0 rgba(37,99,235,.35);
          transition:text-shadow 1s cubic-bezier(.22,1,.36,1);
        }
        .d02-01-40 .d02-01-40-h.is-in{
          text-shadow:0 3px 0 rgba(37,99,235,.35);
        }

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