web関連

【jQuery】マウスストーカーの作成をしたときのメモ

2020/11/16

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

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

文字通りマウスカーソルに作成した要素がついてくるようにするモノ
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>

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

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

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

メモ:ふと思ったこと

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

カード型のリンク全体をaタグで作ってその中のボタンでリンクさせたいときとかに使えるなぁって思った

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

リンクがわかりづらい時にリンクがわかりやすいように、どれがリンクかどうか吸い付くような補助機能みたいなのがあると面白いかも
スマホとかホバーアクションないからねリンク補助みたいなのがあったら面白いかもしれないし作るかな