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

縦書き見出し

writing-mode:vertical-rl の和風縦書き見出し。表示時に縦ラインが上から伸びます。和食店・旅館・伝統工芸サイトの世界観づくりに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-01-09-inner io-reveal">
          <span class="d02-01-09-line"></span>
          <h4 class="d02-01-09-h">季節を味わう、<br>大人の隠れ家。</h4>
        </div>

CSS

.prev.d02-01-09{ background:#f6f2ea; }
        .d02-01-09 .d02-01-09-inner{
          display:flex;
          align-items:flex-start;
          gap:18px;
          height:210px;
        }
        .d02-01-09 .d02-01-09-h{
          writing-mode:vertical-rl;
          font-size:22px;
          font-weight:600;
          color:#3b3226;
          letter-spacing:.28em;
          line-height:2;
          opacity:0;
          transform:translateY(12px);
          transition:opacity .9s ease .5s, transform .9s cubic-bezier(.22,1,.36,1) .5s;
        }
        .d02-01-09 .d02-01-09-line{
          width:2px;
          height:100%;
          background:#a58a5c;
          transform:scaleY(0);
          transform-origin:top center;
          transition:transform 1s cubic-bezier(.22,1,.36,1) .1s;
        }
        .d02-01-09 .d02-01-09-inner.is-in .d02-01-09-h{
          opacity:1;
          transform:translateY(0);
        }
        .d02-01-09 .d02-01-09-inner.is-in .d02-01-09-line{
          transform:scaleY(1);
        }

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