パーツ番号 02-01-05 ・ JavaScript使用

1文字ずつ浮き上がる見出し

JSでspan分割し、時間差で1文字ずつ浮かび上がらせます。コンセプトページや採用サイトの見出しを印象的に演出。

プレビュー

ソースコード

HTML

<h4 class="d02-01-05-h io-reveal">一文字ずつ、想いを込めて。</h4>

CSS

.d02-01-05 .d02-01-05-h{
          font-size:26px;
          font-weight:700;
          color:#1a2333;
          letter-spacing:.06em;
        }
        .d02-01-05 .d02-01-05-h .d02-01-05-ch{
          display:inline-block;
          opacity:0;
          transform:translateY(.6em);
          transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
        }
        .d02-01-05 .d02-01-05-h.is-in .d02-01-05-ch{
          opacity:1;
          transform:translateY(0);
        }

JavaScript

(function(){
        var h = document.querySelector('#item-02-01-05 .d02-01-05 .d02-01-05-h');
        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-01-05-ch';
          s.textContent = text[i];
          s.style.transitionDelay = (i * 0.06) + 's';
          h.appendChild(s);
        }
      })();

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