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

マグネット吸着カーソル

近くにカーソルが来るとボタンがわずかに吸い寄せられるマグネット効果。CTAボタンのクリック率向上を狙う演出に使えます。

clickjs

プレビュー

ソースコード

HTML

<button class="d08-06-04-btn" type="button">送信する</button>

CSS

.d08-06-04-btn{position:relative;padding:12px 28px;border:none;border-radius:8px;background:#4a6cf7;color:#fff;font-size:14px;cursor:pointer;transition:transform .15s ease-out;}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-04');
          var btn=root.querySelector('.d08-06-04-btn');
          root.addEventListener('mousemove',function(e){
            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.sqrt(dx*dx+dy*dy);
            var range=90;
            if(dist<range){
              var power=(1-dist/range)*0.4;
              btn.style.transform='translate('+(dx*power)+'px,'+(dy*power)+'px)';
            } else {
              btn.style.transform='translate(0,0)';
            }
          });
          root.addEventListener('mouseleave',function(){btn.style.transform='translate(0,0)';});
        })();

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