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

カーソルに追従する磁力可視化リング

大きさの異なる同心円がそれぞれ違う遅延でカーソルを追いかけ、磁場のような残像を描きます。WordPressのカーソルエフェクトや特集ページの演出に使えます。

プレビュー

ソースコード

HTML

<div class="d08-14-09-field">
          <span class="d08-14-09-ring r1"></span>
          <span class="d08-14-09-ring r2"></span>
          <span class="d08-14-09-ring r3"></span>
        </div>

CSS

.d08-14-09-field{position:relative;width:100%;height:190px;cursor:crosshair}
        .d08-14-09-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:2px solid rgba(124,92,255,.55);transform:translate(-50%,-50%);pointer-events:none;transition:left .25s ease-out,top .25s ease-out}
        .d08-14-09-ring.r1{width:18px;height:18px;border-color:rgba(124,92,255,.9);transition-duration:.06s}
        .d08-14-09-ring.r2{width:42px;height:42px;transition-duration:.16s}
        .d08-14-09-ring.r3{width:70px;height:70px;border-color:rgba(124,92,255,.3);transition-duration:.32s}

JavaScript

(function(){
        var field=document.querySelector('#item-08-14-09 .d08-14-09-field');if(!field)return;
        var rings=field.querySelectorAll('.d08-14-09-ring');
        field.addEventListener('mousemove',function(e){
          var r=field.getBoundingClientRect();
          var x=e.clientX-r.left,y=e.clientY-r.top;
          rings.forEach(function(ring){ring.style.left=x+'px';ring.style.top=y+'px';});
        });
        field.addEventListener('mouseleave',function(){
          rings.forEach(function(ring){ring.style.left='50%';ring.style.top='50%';});
        });
      })();

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