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

コーナーフレームイン見出し

四隅の線がスクロールで内側へ伸びてフレームを形作り、見出しを縁取る演出。ビジョン・ミッションページや写真キャプションの見出しに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d02-01-26-wrap io-reveal">
          <span class="d02-01-26-corner d02-01-26-tl"></span>
          <span class="d02-01-26-corner d02-01-26-tr"></span>
          <span class="d02-01-26-corner d02-01-26-bl"></span>
          <span class="d02-01-26-corner d02-01-26-br"></span>
          <h4 class="d02-01-26-h">OUR VISION</h4>
        </div>

CSS

.d02-01-26 .d02-01-26-wrap{
          position:relative;
          display:inline-block;
          padding:24px 36px;
        }
        .d02-01-26 .d02-01-26-h{
          font-size:24px;
          font-weight:800;
          letter-spacing:.1em;
          color:#1a2333;
        }
        .d02-01-26 .d02-01-26-corner{
          position:absolute;
          width:0;
          height:0;
          opacity:0;
          transition:opacity .5s ease, width .6s cubic-bezier(.22,1,.36,1), height .6s cubic-bezier(.22,1,.36,1);
        }
        .d02-01-26 .d02-01-26-tl{ top:0; left:0; border-top:3px solid #2563eb; border-left:3px solid #2563eb; }
        .d02-01-26 .d02-01-26-tr{ top:0; right:0; border-top:3px solid #2563eb; border-right:3px solid #2563eb; }
        .d02-01-26 .d02-01-26-bl{ bottom:0; left:0; border-bottom:3px solid #2563eb; border-left:3px solid #2563eb; }
        .d02-01-26 .d02-01-26-br{ bottom:0; right:0; border-bottom:3px solid #2563eb; border-right:3px solid #2563eb; }
        .d02-01-26 .d02-01-26-wrap.is-in .d02-01-26-corner{
          opacity:1;
          width:22px;
          height:22px;
        }

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