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

ロータリーイン見出し

スクロールで画面外から回転しながら正面向きに収まっていく見出し。コンセプトページやスライダーの切り替わり時の見出し演出に躍動感を加えます。

scrollcss3d

プレビュー

ソースコード

HTML

<h4 class="d02-01-33-h io-reveal">ここから、はじまる。</h4>

CSS

.d02-01-33 .d02-01-33-h{
          display:inline-block;
          font-size:28px;
          font-weight:800;
          letter-spacing:.06em;
          color:#1a2333;
          opacity:0;
          transform:rotate(-50deg) translateX(-60px) scale(.7);
          transition:transform 1s cubic-bezier(.22,1,.36,1), opacity .8s ease;
        }
        .d02-01-33 .d02-01-33-h.is-in{
          opacity:1;
          transform:rotate(0deg) translateX(0) scale(1);
        }

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