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

パルス文字見出し

文字ごとに異なる遅延でわずかな拡大縮小を繰り返す演出。常時動きのあるヒーロー見出しやローディング周辺のアクセントに使えます。

autojs

プレビュー

ソースコード

HTML

<h4 class="d02-01-39-h">息づく、文字たち。</h4>

CSS

.d02-01-39 .d02-01-39-h{
          font-size:26px;
          font-weight:800;
          letter-spacing:.06em;
          color:#1a2333;
        }
        .d02-01-39 .d02-01-39-ch{
          display:inline-block;
          animation:d02-01-39-pulse 2.2s ease-in-out infinite;
        }
        @keyframes d02-01-39-pulse{
          0%,100%{ transform:scale(1); }
          50%{ transform:scale(1.25); color:#2563eb; }
        }

JavaScript

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

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