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

傾き解消アニメーション見出し

斜めに傾いた状態からスクロールをきっかけに水平へすっと戻る見出し演出です。コンセプトメッセージやスローガンの提示に落ち着いた印象を添えます。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-12-05-inner io-reveal">
          <h4>まっすぐな想いを、カタチに。</h4>
        </div>

CSS

.prev.d02-12-05{ background:#f5f6fa; }
        .d02-12-05 .d02-12-05-inner{
          height:200px;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d02-12-05 h4{
          font-size:21px;
          font-weight:700;
          letter-spacing:.04em;
          line-height:1.7;
          color:#1a2333;
          text-align:center;
          opacity:0;
          transform:skewX(-10deg) rotate(-6deg) translateY(14px);
          transition:opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-05 .d02-12-05-inner.is-in h4{
          opacity:1;
          transform:skewX(0deg) rotate(0deg) translateY(0);
        }

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