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

縦ストライプ組み上げ見出し

見出しを縦のストライプに分割し、各帯が下から次々にスライドインして1つの文字列に組み上がる演出。実績・コンセプトページの見出しに動きを。

css

プレビュー

ソースコード

HTML

<div class="d02-01-20-wrap io-reveal">
          <span class="d02-01-20-strip" style="--i:0"><span class="d02-01-20-txt">未来を創る力</span></span>
          <span class="d02-01-20-strip" style="--i:1"><span class="d02-01-20-txt">未来を創る力</span></span>
          <span class="d02-01-20-strip" style="--i:2"><span class="d02-01-20-txt">未来を創る力</span></span>
          <span class="d02-01-20-strip" style="--i:3"><span class="d02-01-20-txt">未来を創る力</span></span>
          <span class="d02-01-20-strip" style="--i:4"><span class="d02-01-20-txt">未来を創る力</span></span>
          <span class="d02-01-20-strip" style="--i:5"><span class="d02-01-20-txt">未来を創る力</span></span>
        </div>

CSS

.d02-01-20 .d02-01-20-wrap{
          position:relative;
          display:flex;
          overflow:hidden;
          width:240px;
          height:40px;
        }
        .d02-01-20 .d02-01-20-strip{
          position:relative;
          width:40px;
          height:40px;
          overflow:hidden;
          transform:translateY(120%);
          opacity:0;
          transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
          transition-delay:calc(var(--i) * .06s);
        }
        .d02-01-20 .d02-01-20-txt{
          position:absolute;
          left:calc(var(--i) * -40px);
          top:0;
          white-space:nowrap;
          font-size:26px;
          font-weight:800;
          line-height:40px;
          color:#1a2333;
          letter-spacing:.02em;
        }
        .d02-01-20 .d02-01-20-wrap.is-in .d02-01-20-strip{
          transform:translateY(0);
          opacity:1;
        }

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