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

離すと弾んで戻るマグネットボタン

吸い寄せ中は滑らかに追従し、カーソルを離すとバネのように弾んで元の位置へ戻ります。WordPressのフォーム送信ボタンなどに躍動感を加えられます。

clickjsinput

プレビュー

ソースコード

HTML

<button class="d08-14-06-btn" type="button">Bounce Magnet</button>

CSS

.d08-14-06-btn{background:#0ea5a5;color:#fff;border:none;border-radius:14px;padding:16px 26px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .12s linear}
        .d08-14-06-btn.is-back{transition:transform .6s cubic-bezier(.34,1.7,.4,1)}

JavaScript

(function(){
        var wrap=document.querySelector('#item-08-14-06 .d08-14-06');
        var btn=document.querySelector('#item-08-14-06 .d08-14-06-btn');if(!wrap||!btn)return;
        wrap.addEventListener('mousemove',function(e){
          btn.classList.remove('is-back');
          var r=btn.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=120;
          if(dist<radius){
            var p=(1-dist/radius)*0.5;
            btn.style.transform='translate('+(dx*p)+'px,'+(dy*p)+'px)';
          }else{
            btn.style.transform='';
          }
        });
        wrap.addEventListener('mouseleave',function(){
          btn.classList.add('is-back');
          btn.style.transform='';
        });
      })();

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