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

ダイアゴナルスライド見出し

右上から斜めにスライドしながら回転もおさまり、定位置にぴたりと着地する見出し。サービス紹介セクションの導入見出しに動きを添えます。

css3d

プレビュー

ソースコード

HTML

<div class="d02-12-09-inner io-reveal">
          <h4>DIAGONAL ENTRY</h4>
        </div>

CSS

.prev.d02-12-09{ background:#eef2ff; }
        .d02-12-09 .d02-12-09-inner{
          height:200px;
          display:flex;
          align-items:center;
          justify-content:center;
          overflow:hidden;
        }
        .d02-12-09 h4{
          font-size:24px;
          font-weight:800;
          letter-spacing:.05em;
          color:#312e81;
          opacity:0;
          transform:translate(70px,-46px) rotate(10deg);
          transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-09 .d02-12-09-inner.is-in h4{
          opacity:1;
          transform:translate(0,0) rotate(0deg);
        }

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