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

バウンスホバー見出し

マウスを乗せると1文字ずつランダムなタイミングで軽くジャンプする見出し。採用サイトやキッズ向けサービスの遊び心あるインタラクションに。

プレビュー

ソースコード

HTML

<h4 class="d02-01-35-h">はねる、文字たち。</h4>

CSS

.d02-01-35 .d02-01-35-h{
          font-size:26px;
          font-weight:800;
          letter-spacing:.03em;
          color:#1a2333;
          cursor:default;
          user-select:none;
        }
        .d02-01-35 .d02-01-35-ch{
          display:inline-block;
          transition:transform .35s cubic-bezier(.34,1.56,.64,1);
        }

JavaScript

(function(){
        var h = document.querySelector('#item-02-01-35 .d02-01-35-h');
        if(!h) return;
        var text = h.textContent;
        h.textContent = '';
        var chars = [];
        for(var i = 0; i < text.length; i++){
          var s = document.createElement('span');
          s.className = 'd02-01-35-ch';
          s.textContent = text[i] === ' ' ? ' ' : text[i];
          h.appendChild(s);
          chars.push(s);
        }
        h.addEventListener('mouseenter', function(){
          chars.forEach(function(ch){
            var jump = -(6 + Math.random() * 14);
            ch.style.transform = 'translateY(' + jump + 'px)';
            setTimeout(function(){ ch.style.transform = 'translateY(0)'; }, 350 + Math.random() * 150);
          });
        });
      })();

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