パーツ番号 08-14-03 ・ JavaScript使用

文字ごとに反応するマグネット見出し

カーソルに近い文字だけが個別に引き寄せられ、見出し全体が生き物のように揺れます。WordPressのトップページの目を引くタイトル演出に使えます。

プレビュー

ソースコード

HTML

<h3 class="d08-14-03-heading" aria-label="MAGNET"><span>M</span><span>A</span><span>G</span><span>N</span><span>E</span><span>T</span></h3>

CSS

.d08-14-03-heading{display:flex;gap:3px;font-size:34px;font-weight:800;color:#2a2d3a;margin:0;letter-spacing:.02em}
        .d08-14-03-heading span{display:inline-block;transition:transform .12s ease-out}

JavaScript

(function(){
        var wrap=document.querySelector('#item-08-14-03 .d08-14-03');
        var spans=wrap?wrap.querySelectorAll('.d08-14-03-heading span'):null;if(!wrap||!spans||!spans.length)return;
        wrap.addEventListener('mousemove',function(e){
          spans.forEach(function(s){
            var r=s.getBoundingClientRect();
            var cx=r.left+r.width/2,cy=r.top+r.height/2;
            var dx=e.clientX-cx,dy=e.clientY-cy;
            var dist=Math.hypot(dx,dy);
            var radius=70;
            if(dist<radius){
              var p=(1-dist/radius)*0.5;
              s.style.transform='translate('+(dx*p)+'px,'+(dy*p)+'px)';
            }else{
              s.style.transform='';
            }
          });
        });
        wrap.addEventListener('mouseleave',function(){spans.forEach(function(s){s.style.transform='';});});
      })();

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