マウスのカーソルを追従するマウスストーカーの作り方です。
CSSでマウスストーカーのスタイルを設定する
マウスストーカーの色は background 、大きさは width height で変更できます。
マウスのカーソルを動かしたときに少し遅れて付いてくるようにしますが、
そのときの遅延具合を transition の transform の数値で調整できます。
数値を大きくすると追従する速度がより遅く、小さくするとより速くなります。
.mouse-stalker {
background: rgba(green, 0.4);
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
width: 12px;
height: 12px;
transition:
transform 0.6s,
width 0.5s,
height 0.5s,
background-color 0.5s;
transition-timing-function: ease-out;
z-index: 999;
@media screen and (max-width: 599px) {
display: none;
}
}スマホでは非表示になるようにしています。class名は適宜変更してください。
JavaScriptでマウスストーカーを作成する
div を作成して body に追加します。
CSSでマウスストーカーのスタイルを設定するために class も付与しています。
const stalker = document.createElement("div");
stalker.setAttribute("class", "mouse-stalker");
document.body.appendChild(stalker);画面の左上に先ほど設定した色とサイズのマウスストーカーが表示されます。
この時点ではまだマウスを追従しません。
マウスのカーソルを追従させるfunctionを作成して実行する
clientX clientY でマウスのカーソルの位置（ウィンドウの左端と上からの距離）を取得します。
CSSの translate に取得したマウスの座標を設定し、
マウスストーカーの位置をマウスのカーソルの位置と同じ位置に移動させます。
mousemove でマウスが動くたびにfuntionが実行され、
マウスのカーソルの位置 = マウスストーカーの位置が更新されます。
このとき最初にCSSで transform の値を遅延させるように設定しているので、
マウスストーカーが少し遅れてカーソルを追従するような動きになります。
const mouseMove = (e) => {
stalker.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
};
document.addEventListener("mousemove", mouseMove);