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

ブラケット挟み込み見出し

左右の角括弧がスクロールで外側から寄ってきて見出しを挟み込む演出。キャンペーンバナーや特集タイトルの目印として使えます。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-01-14-wrap io-reveal">
          <span class="d02-01-14-bracket d02-01-14-l">[</span>
          <h4 class="d02-01-14-h">SPECIAL OFFER</h4>
          <span class="d02-01-14-bracket d02-01-14-r">]</span>
        </div>

CSS

.d02-01-14 .d02-01-14-wrap{
          display:flex;
          align-items:center;
          justify-content:center;
          gap:10px;
        }
        .d02-01-14 .d02-01-14-h{
          font-size:26px;
          font-weight:800;
          color:#1a2333;
          letter-spacing:.08em;
        }
        .d02-01-14 .d02-01-14-bracket{
          font-size:38px;
          font-weight:300;
          color:#2563eb;
          opacity:0;
          transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease;
        }
        .d02-01-14 .d02-01-14-l{ transform:translateX(-40px); }
        .d02-01-14 .d02-01-14-r{ transform:translateX(40px); }
        .d02-01-14 .d02-01-14-wrap.is-in .d02-01-14-bracket{
          opacity:1;
          transform:translateX(0);
        }

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