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

アイコンが吸着するマグネットナビ

カーソルに近いアイコンだけが拡大しながら吸い寄せられる、Dock風のナビゲーションです。WordPressのフローティングツールバーに応用できます。

プレビュー

ソースコード

HTML

<nav class="d08-14-05-nav" aria-label="マグネットナビ">
          <button type="button" class="d08-14-05-ic" aria-label="ホーム">🏠</button>
          <button type="button" class="d08-14-05-ic" aria-label="検索">🔍</button>
          <button type="button" class="d08-14-05-ic" aria-label="お気に入り">❤</button>
          <button type="button" class="d08-14-05-ic" aria-label="メニュー">☰</button>
        </nav>

CSS

.d08-14-05-nav{display:flex;gap:16px;background:#1f2233;padding:14px 22px;border-radius:20px}
        .d08-14-05-ic{background:#2c3050;border:none;border-radius:12px;width:44px;height:44px;font-size:18px;color:#fff;cursor:pointer;transition:transform .15s ease-out}

JavaScript

(function(){
        var nav=document.querySelector('#item-08-14-05 .d08-14-05-nav');if(!nav)return;
        var icons=nav.querySelectorAll('.d08-14-05-ic');
        nav.addEventListener('mousemove',function(e){
          icons.forEach(function(ic){
            var r=ic.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=60;
            if(dist<radius){
              var p=(1-dist/radius)*0.4;
              var scale=1+(1-dist/radius)*0.25;
              ic.style.transform='translate('+(dx*p)+'px,'+(dy*p)+'px) scale('+scale+')';
            }else{
              ic.style.transform='';
            }
          });
        });
        nav.addEventListener('mouseleave',function(){icons.forEach(function(ic){ic.style.transform='';});});
      })();

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