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

カーテンリビール縦書き見出し

スクロールで画面に入ると、下から幕が上がるように縦書きテキストが姿を現します。和食店や旅館サイトの季節のご案内見出しに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-12-02-inner io-reveal">
          <h4>旬の便り</h4>
        </div>

CSS

.prev.d02-12-02{ background:#eef4f1; }
        .d02-12-02 .d02-12-02-inner{
          height:200px;
          display:flex;
          align-items:center;
          justify-content:center;
          overflow:hidden;
        }
        .d02-12-02 h4{
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:20px;
          font-weight:700;
          letter-spacing:.28em;
          line-height:1.9;
          color:#1f5c4d;
          clip-path:inset(0 0 100% 0);
          transform:translateY(14px);
          transition:clip-path 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-02 .d02-12-02-inner.is-in h4{
          clip-path:inset(0 0 0% 0);
          transform:translateY(0);
        }

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