【JavaScript】おしゃれなサイトにオススメ！マウスストーカーを実装

2025年04月14日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はカッコイイ、おしゃれなサイトでよく見るマウスストーカーの実装方法を紹介します！

実装例は、すでにカーソルに赤い丸がついてきてますよね。
ただまあ、これを実装したところでサイトの利便性が上がったりとかはほぼほぼないですね・・・
完全に見た目のオシャレっぽさのためのものです笑

マウスストーカー

HTML例

<div id="js-stalker-wrap">
  <div id="js-stalker">マウスストーカー</div>
</div>

CSS例

#js-stalker-wrap{
  opacity: 0;
  transition: 2s;
  pointer-events: none;
}
#js-stalker{
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-indent: -9999px;
  background: rgba(253, 0, 0, 0.5);
  z-index: 9999;
}

JavaScript例

var stalker = document.getElementById('js-stalker');
var stalkerWrap = document.getElementById('js-stalker-wrap');
var sWidth = 40,
    delay = 10,
    mouseX = 0,
    mouseY = 0,
    posX = 0,
    posY = 0;
document.addEventListener('mousemove', function (e) {
  stalkerWrap.style.opacity = '1';
});
function animate() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    stalker.style.left = (posX - sWidth / 2) + 'px';
    stalker.style.top = (posY - sWidth / 2) + 'px';
    requestAnimationFrame(animate);
}
animate();
document.addEventListener('mousemove', function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});