パーツ番号 02-12-04 ・ JavaScript使用

縦書き1文字ずつリビール見出し

JSで縦書きテキストを1文字ずつspan分割し、上から順に時間差で降りてくるように出現させます。ブランドコンセプトページの世界観づくりに。

scrolljs

プレビュー

ソースコード

HTML

<div class="d02-12-04-box">
          <h4 class="io-reveal">想いを届ける</h4>
        </div>

CSS

.prev.d02-12-04{ background:#fff; }
        .d02-12-04 .d02-12-04-box{
          height:200px;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d02-12-04 h4{
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:18px;
          font-weight:700;
          letter-spacing:.24em;
          line-height:1.7;
          color:#1a2333;
        }
        .d02-12-04 h4 .d02-12-04-ch{
          display:inline-block;
          opacity:0;
          transform:translateY(-.6em);
          transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-04 h4.is-in .d02-12-04-ch{
          opacity:1;
          transform:translateY(0);
        }

JavaScript

(function(){
        var h = document.querySelector('#item-02-12-04 .d02-12-04 h4');
        if(!h) return;
        var text = h.textContent;
        h.textContent = '';
        for(var i = 0; i < text.length; i++){
          var s = document.createElement('span');
          s.className = 'd02-12-04-ch';
          s.textContent = text[i];
          s.style.transitionDelay = (i * 0.09) + 's';
          h.appendChild(s);
        }
      })();

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