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

吸着してから離れるマグネットロゴ

カーソルが近づくとロゴが吸い寄せられますが、さらに接近しすぎると磁力が反転して離れます。WordPressのヘッダーロゴに意外性のある動きを持たせられます。

プレビュー

ソースコード

HTML

<div class="d08-14-10-logo">M</div>

CSS

.d08-14-10{cursor:default}
        .d08-14-10-logo{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#f43f5e,#fb923c);color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:transform .18s ease-out;box-shadow:0 10px 22px rgba(244,63,94,.35)}

JavaScript

(function(){
        var wrap=document.querySelector('#item-08-14-10 .d08-14-10');
        var logo=document.querySelector('#item-08-14-10 .d08-14-10-logo');if(!wrap||!logo)return;
        wrap.addEventListener('mousemove',function(e){
          var r=logo.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 outer=140,inner=34;
          if(dist<inner){
            logo.style.transform='';
          }else if(dist<outer){
            var p=(1-dist/outer)*0.45;
            logo.style.transform='translate('+(dx*p)+'px,'+(dy*p)+'px)';
          }else{
            logo.style.transform='';
          }
        });
        wrap.addEventListener('mouseleave',function(){logo.style.transform='';});
      })();

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