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

パーティクル軌跡カーソル

マウスの軌跡に沿って小さな粒子が発生して消えていくエフェクト。ヒーローセクションなど装飾的な演出に向いています。

プレビュー

ソースコード

HTML

<p class="d08-06-05-hint">マウスを動かすと粒子が発生します</p>

CSS

.d08-06-05{cursor:none;}
        .d08-06-05-hint{color:#999;font-size:13px;pointer-events:none;user-select:none;}
        .d08-06-05-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#4a6cf7;pointer-events:none;animation:d575fade .6s ease-out forwards;}
        @keyframes d575fade{to{opacity:0;transform:scale(0.3) translateY(-10px);}}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-05');
          var last=0;
          root.addEventListener('mousemove',function(e){
            var now=Date.now();
            if(now-last<40)return;
            last=now;
            var r=root.getBoundingClientRect();
            var x=e.clientX-r.left, y=e.clientY-r.top;
            var dot=document.createElement('span');
            dot.className='d08-06-05-dot';
            dot.style.left=(x-3)+'px';
            dot.style.top=(y-3)+'px';
            root.appendChild(dot);
            dot.addEventListener('animationend',function(){dot.remove();});
          });
        })();

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