マグネットホバー見出し

<h4 class="d02-01-21-h">MAGNET TEXT</h4>

.prev.d02-01-21{ background:#0f1222; }
        .d02-01-21 .d02-01-21-h{
          font-size:30px;
          font-weight:800;
          letter-spacing:.06em;
          color:#f8fafc;
          cursor:default;
          user-select:none;
        }
        .d02-01-21 .d02-01-21-ch{
          display:inline-block;
          transition:transform .18s ease-out;
        }

(function(){
        var box = document.querySelector('#item-02-01-21 .d02-01-21');
        var h = box ? box.querySelector('.d02-01-21-h') : null;
        if(!box || !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-21-ch';
          s.textContent = text[i] === ' ' ? ' ' : text[i];
          h.appendChild(s);
          chars.push(s);
        }
        box.addEventListener('mousemove', function(e){
          var rect = box.getBoundingClientRect();
          var mx = e.clientX - rect.left;
          var my = e.clientY - rect.top;
          chars.forEach(function(ch){
            var r = ch.getBoundingClientRect();
            var cx = r.left + r.width / 2 - rect.left;
            var cy = r.top + r.height / 2 - rect.top;
            var dx = mx - cx, dy = my - cy;
            var dist = Math.sqrt(dx * dx + dy * dy);
            var radius = 80;
            if(dist < radius){
              var power = (1 - dist / radius) * 10;
              var angle = Math.atan2(dy, dx);
              ch.style.transform = 'translate(' + (Math.cos(angle) * power) + 'px,' + (Math.sin(angle) * power) + 'px)';
            } else {
              ch.style.transform = 'translate(0,0)';
            }
          });
        });
        box.addEventListener('mouseleave', function(){
          chars.forEach(function(ch){ ch.style.transform = 'translate(0,0)'; });
        });
      })();