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

カーソルから逃げる反発アイコン

マウスが近づくとアイコンが反発力でスッと逃げ、離れると中央へ戻ります。WordPressの遊び心あるバッジやイースターエッグ的な装飾に使えます。

プレビュー

ソースコード

HTML

<div class="d08-14-02-icon" aria-hidden="true">⚡</div>

CSS

.d08-14-02{cursor:crosshair}
        .d08-14-02-icon{font-size:36px;line-height:1;transition:transform .15s ease-out;user-select:none}

JavaScript

(function(){
        var wrap=document.querySelector('#item-08-14-02 .d08-14-02');
        var icon=document.querySelector('#item-08-14-02 .d08-14-02-icon');if(!wrap||!icon)return;
        wrap.addEventListener('mousemove',function(e){
          var r=icon.getBoundingClientRect();
          var cx=r.left+r.width/2,cy=r.top+r.height/2;
          var dx=cx-e.clientX,dy=cy-e.clientY;
          var dist=Math.hypot(dx,dy);
          var radius=100;
          if(dist<radius&&dist>0.01){
            var p=(1-dist/radius)*40;
            icon.style.transform='translate('+((dx/dist)*p)+'px,'+((dy/dist)*p)+'px)';
          }else{
            icon.style.transform='';
          }
        });
        wrap.addEventListener('mouseleave',function(){icon.style.transform='';});
      })();

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