なんかネットサーフィンしてたらマウスストーカーってのを使ってるサイトがあって気になったので調べてみた

マウスストーカーの仕組み

文字通りマウスカーソルに作成した要素がついてくるようにするモノ
HTMLでマウスカーソルに付いてくるストーカーを作って、CSSでその装飾とポジションプロパティを指定してJSでマウスカーソルの位置を取得してストーカーに座標を指定するみたいね

マウスストーカー作成のコード

<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>

これで作れるんだけどieで凄いカクつくわ
ホバー用の処理もしたいので要素を親子に分けてみる

それと、
transitionに指定する時間だけど0.3sとかに指定するとストーカーの動きがもっさりする
0.3秒の間にマウスカーソルが動いてると座標の確定ができないからもっさりするのかな？
0.1秒だと座標の確定が早いから比較的滑らかに動くってこと？

ホバー処理も追加して書き直し

ホバー時にストーカーが大きくなるように書き直してみた

<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>

分けてみたんだけど、駄目だね
#stalkerにtransformでマウスカーソルの座標情報を指定してそこにtransitionで変化の速度を指定するとieでカクツキが出るわ
だから#stalkerにtransitionを指定しなければieでカクツキはなくなるわ(処理が即座に実行される)
その分マウスカーソルにぴったしストーカーがついてくるわけなんだけどさ…

.stalker__pointer内の
transitionはホバーアクション用に指定してるのでマウスカーソルを動かした時の処理とは関係がないはず

結論、色々試したんだけどieでカクつくわ
#stalkerからtransitionを除去すればカクつかない
ie以外だったらwill-changeプロパティを使うとアニメーションが滑らかになるみたいだけど肝心のieが対応してない

メモ：ふと思ったこと

リンク無効化するpointer-events：noneを親に指定すれば子要素にも反映されるね
で、子要素にpointer-events：autoを指定すればその部分だけリンク復活させられるみたい

position:fiexdを指定している要素の中にposition:absolute指定してもちゃんと動くんすね
absoluteの値について調べたら「親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置」って書いてあるからabsoluteを使うときは問答無用で親要素を基準にするってことなのかな？fixedかかっても関係ないわ！って感じ？