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

カーテンオープン見出し

画面に入ると同時に上下2枚のパネルが開いて中の文字が現れる演出。新規オープンのお知らせやキャンペーン開始セクションの見出しに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-01-38-stage io-reveal">
          <h4 class="d02-01-38-h">GRAND OPEN</h4>
          <span class="d02-01-38-panel d02-01-38-top"></span>
          <span class="d02-01-38-panel d02-01-38-bottom"></span>
        </div>

CSS

.d02-01-38 .d02-01-38-stage{
          position:relative;
          display:flex;
          align-items:center;
          justify-content:center;
          height:120px;
          overflow:hidden;
        }
        .d02-01-38 .d02-01-38-h{
          font-size:28px;
          font-weight:800;
          letter-spacing:.08em;
          color:#1a2333;
        }
        .d02-01-38 .d02-01-38-panel{
          position:absolute;
          left:0; width:100%; height:52%;
          background:#1a2333;
          transition:transform .8s cubic-bezier(.65,0,.35,1);
        }
        .d02-01-38 .d02-01-38-top{ top:0; transform:translateY(0); }
        .d02-01-38 .d02-01-38-bottom{ bottom:0; transform:translateY(0); }
        .d02-01-38 .d02-01-38-stage.is-in .d02-01-38-top{ transform:translateY(-100%); }
        .d02-01-38 .d02-01-38-stage.is-in .d02-01-38-bottom{ transform:translateY(100%); }

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