パーツ番号 02-12-03 ・ CSSのみ

回転バウンド斜め見出し

画面に入ると斜めに傾いた状態から回転しながら弾むように定位置へ着地します。イベントバナーやセール告知の見出しにインパクトを。

scrollcss3d

プレビュー

ソースコード

HTML

<div class="d02-12-03-inner io-reveal">
          <h4>ROTATE<br>IN STYLE</h4>
        </div>

CSS

.prev.d02-12-03{ background:#111827; }
        .d02-12-03 .d02-12-03-inner{ text-align:center; }
        .d02-12-03 h4{
          display:inline-block;
          font-size:24px;
          font-weight:800;
          line-height:1.25;
          letter-spacing:.04em;
          color:#fff;
          background:linear-gradient(135deg,#f97316,#db2777);
          padding:14px 22px;
          border-radius:10px;
          opacity:0;
          transform:rotate(-18deg) translate(-40px,24px) scale(.85);
          transition:opacity .8s ease, transform .9s cubic-bezier(.34,1.56,.64,1);
        }
        .d02-12-03 .d02-12-03-inner.is-in h4{
          opacity:1;
          transform:rotate(0deg) translate(0,0) scale(1);
        }

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