実装サンプル
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body class="top_page">
・
・
・
<div id="cursor"></div>
<div id="stalker"></div>
・
・
・
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
#cursor {
width: 26px;
height: 26px;
background-image: url("../img/icon_cheese.png");
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
#stalker {
width: 30px;
height: 30px;
background-image: url("../img/icon_mouse.png");
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) {
let x = e.clientX;
let y = e.clientY;
$cursor.css({
'top': y + 'px',
'left': x + 'px',
'transform': 'translate(-50%, -50%)',
})
setTimeout(function () {
$stalker.css({
'top': y + 'px',
'left': x + 'px',
'transform': 'translate(20px, -16px)',
});
}, 100);
});
解説
HTML
<div id="cursor"></div>
<div id="stalker"></div>
マウスカーソルに追従させる要素を作成。
カーソルのみの場合はストーカー用のタグは不要。
CSS
#cursor {
width: 26px;
height: 26px;
background-image: url("../img/icon_cheese.png");
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
#stalker {
width: 30px;
height: 30px;
background-image: url("../img/icon_mouse.png");
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
マウスカーソル要素を絶対配置（position: fixed）を設定。
fixedにしないと画面をスクロールした際にカーソルがどっかに行ってしまう。
デザインはWEBページなどのテーマに合わせてお好みで ！
デフォルトのカーソルを非表示にしたい場合は
body,
a,
input,
select,
textarea {
cursor: none;
}
を指定し非表示にする。
jQuery
let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) { // マウスが動くたびにイベント発火
let x = e.clientX; // マウスのX軸座標を取得
let y = e.clientY; // マウスのY軸座標を取得
$cursor.css({
'top': y + 'px', // 取得した座標でY軸を動的に変更
'left': x + 'px', // 取得した座標でX軸を動的に変更
'transform': 'translate(-50%, -50%)', // カーソルを中央に配置
})
setTimeout(function () { // ストーカーがない場合は不要
$stalker.css({
'top': y + 'px', // Y軸を動的に変更
'left': x + 'px', // X軸を動的に変更
'transform': 'translate(20px, -16px)',
});
}, 100); // 0.1秒後にストーカーを追従
});
まずは、カーソルとストライカーのDOMを取得。
次にマウスカーソルが動くたびにイベントを発火させ、マウスカーソルのXとY軸の座標を取得し、取得した座標で動的にCSSの値（top: 0 left: 0）を変更し、マウスカーソルに追従させる。
このままだとカーソルの配置が左上に寄ってしまうので、transformでカーソルを中央に配置。
ストーカーがある場合はsetTimeoutで指定の秒数後に追従させる。
以上です。