【jQuery】マウスカーソルに追従してくる「マウスストーカー」の作成方法

webサイトでマウスを動かすと追ってついてきたり、リンクにホバーすると大きくなったりする「マウスストーカー」の作成方法の備忘録。

シンプルな「マウスストーカー」の作り方

シンプルにマウスの後を追ってくるだけの「マウスストーカー」は以下のように作る。
※jQueryの読み込みは必須。

<style>
body{
  position: relative;
}
#stalker{
  border-radius: 100%;
  background: rgb(204 204 204 / .5);
  position: fixed;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  z-index: 2;
  pointer-events: none;/*ストーカーがマウスカーソルとリンクとの間に挟まってクリックできなくするのを回避*/
  transition: all 0.1s ease;
}
</style>

<div id="stalker"></div>

<script>
jQuery(function($){
	$(document).on("mousemove",function(e){
		$("#stalker").css({transform: 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)'});
	});
});
</script>

以下は実装例。

See the Pen
【javascript】マウスストーカーの作成したときのメモ(その1) by twotone (@twotone-me)
on CodePen.

リンクにホバーした時に大きくなる「マウスストーカー」の作り方

リンクをホバーした時に分かりやすく大きくなる「マウスストーカー」の作り方は以下。
※jQueryの読み込みは必須。

<style>
body{
  position: relative;
}
#stalker{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  pointer-events: none;/*ストーカーがマウスカーソルとリンクとの間に挟まってクリックできなくするのを回避*/
  transition: transform 0.1s ease;/*ieの時にカクつく*/
}
#stalker .stalker__pointer{
  transition: all 0.4s ease;/*ホバーの時の変化の指定*/
  border-radius: 100%;
  background: rgba(204,204,204,.5);
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
}
#stalker.active .stalker__pointer{
  background: rgba(255,152,0 ,.3);
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
}
</style>

<a href="#">test</a>
<div id="stalker"><div class="stalker__pointer"></div></div>

<script>
jQuery(function($){
	var stalker = $("#stalker");
	$(document).on("mousemove",function(e){
		stalker.css({transform: 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)'});
	});

	$("a").on({
		"mouseenter": function() {
			stalker.addClass("active");
		},
		"mouseleave": function() {
			stalker.removeClass("active");
		}
	});
});
</script>

以下は実装例。

See the Pen
【javascript】マウスストーカーの作成したときのメモ(その2) by twotone (@twotone-me)
on CodePen.

現状、IEだとかくつくが「2022年6月16日」にサポート対象外になっているので無視。もし、IEも対応したい場合はCSSでwill-changeを使うと改善する可能性があるが、最終手段のためおすすめはしない。参考リンクはこちら。