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

リング型追従カーソル(遅延あり)

マウスカーソルに遅れてリング型の要素が追従するエフェクト。WordPressのポートフォリオサイトなどでカーソル演出として利用できます。

プレビュー

ソースコード

HTML

<p class="d08-06-01-hint">エリア内でマウスを動かしてください</p>
        <span class="d08-06-01-cursor"></span>

CSS

.d08-06-01{cursor:none;}
        .d08-06-01-hint{color:#999;font-size:13px;pointer-events:none;user-select:none;}
        .d08-06-01-cursor{position:absolute;width:32px;height:32px;margin-left:-16px;margin-top:-16px;border:2px solid #4a6cf7;border-radius:50%;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .15s;}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-01');
          var ring=root.querySelector('.d08-06-01-cursor');
          var tx=0,ty=0,rx=0,ry=0;
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            tx=e.clientX-r.left; ty=e.clientY-r.top;
            ring.style.opacity=1;
          });
          root.addEventListener('mouseleave',function(){ring.style.opacity=0;});
          function loop(){
            rx+=(tx-rx)*0.15; ry+=(ty-ry)*0.15;
            ring.style.transform='translate('+rx+'px,'+ry+'px)';
            requestAnimationFrame(loop);
          }
          loop();
        })();

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