なんかネットサーフィンしてたらマウスストーカーってのを使ってるサイトがあって気になったので調べてみた
マウスストーカーの仕組み
文字通りマウスカーソルに作成した要素がついてくるようにするモノ
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かかっても関係ないわ!って感じ?
リンクがわかりづらい時にリンクがわかりやすいように、どれがリンクかどうか吸い付くような補助機能みたいなのがあると面白いかも
スマホとかホバーアクションないからねリンク補助みたいなのがあったら面白いかもしれないし作るかな