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

俳句風ふわりリビール

縦書きの三行が右から順にふわっとぼかしが取れながら現れる、短歌・俳句のような趣の演出。文芸イベントや和風ブランドの一節紹介に。

css

プレビュー

ソースコード

HTML

<div class="d02-12-08-row io-reveal">
          <p class="d02-12-08-l3">静かな午後</p>
          <p class="d02-12-08-l2">風が運ぶ物語</p>
          <p class="d02-12-08-l1">夏の空</p>
        </div>

CSS

.prev.d02-12-08{ background:#f6f1e7; }
        .d02-12-08 .d02-12-08-row{
          display:flex;
          align-items:flex-start;
          justify-content:center;
          gap:16px;
          height:200px;
        }
        .d02-12-08 .d02-12-08-row p{
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:16px;
          font-weight:600;
          letter-spacing:.22em;
          line-height:1.7;
          color:#4b3f2f;
          margin:0;
          opacity:0;
          filter:blur(6px);
          transform:translateY(10px);
          transition:opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-08 .d02-12-08-row.is-in p{
          opacity:1;
          filter:blur(0);
          transform:translateY(0);
        }
        .d02-12-08 .d02-12-08-row.is-in .d02-12-08-l3{ transition-delay:0s; }
        .d02-12-08 .d02-12-08-row.is-in .d02-12-08-l2{ transition-delay:.2s; }
        .d02-12-08 .d02-12-08-row.is-in .d02-12-08-l1{ transition-delay:.4s; }

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