← 動的パーツギャラリーへ戻る

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

双方向追従カーソル(2レイヤー)

内側は即座に、外側はゆっくり追従する二重リングのカーソル演出。カーソル自体をブランド表現として演出したい場合に有効です。

js

プレビュー

ソースコード

HTML

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

CSS

.d08-06-10{cursor:none;}
        .d08-06-10-hint{color:#999;font-size:13px;pointer-events:none;user-select:none;}
        .d08-06-10-outer{position:absolute;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border:2px solid #4a6cf7;border-radius:50%;left:0;top:0;pointer-events:none;opacity:0;}
        .d08-06-10-inner{position:absolute;width:6px;height:6px;margin-left:-3px;margin-top:-3px;background:#4a6cf7;border-radius:50%;left:0;top:0;pointer-events:none;opacity:0;}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-10');
          var outer=root.querySelector('.d08-06-10-outer');
          var inner=root.querySelector('.d08-06-10-inner');
          var tx=0,ty=0,ox=0,oy=0;
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            tx=e.clientX-r.left; ty=e.clientY-r.top;
            inner.style.transform='translate('+tx+'px,'+ty+'px)';
            outer.style.opacity=1;
            inner.style.opacity=1;
          });
          root.addEventListener('mouseleave',function(){outer.style.opacity=0;inner.style.opacity=0;});
          function loop(){
            ox+=(tx-ox)*0.12; oy+=(ty-oy)*0.12;
            outer.style.transform='translate('+ox+'px,'+oy+'px)';
            requestAnimationFrame(loop);
          }
          loop();
        })();

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