今回は、マウスカーソルを標準の矢印アイコンではなく小さいドットに変更する方法をメモしていきます。
CSSでcursorにドット画像を指定するという単純な方法もあるのですが、今回はJavaScriptを軸にした方法をご紹介していきます。（jQueryには依存しないコードで）
まずは完成形をお見せしておきます。（PCで見てね）
See the Pen マウスカーソルをドットに変更する by ddryo (@ddryo-the-encoder) on CodePen.
このような感じで、マウスカーソルを黒くて小さいドットに変更し、リンクホバー時には少し大きな赤色の円に変更するような演出も加えてみました。
考え方は「遅延しないマウスストーカー」
さて、これからコードを紹介していこうと思うのですが、あらかじめ何をしているのかを説明しておきます。
今回やりたいことは「マウスカーソルをドットに変更する」ということでしたよね。
しかし、実際にやっていくのは次のような流れになります。
- マウスカーソルを非表示にしてしまう
- マウスカーソルの代わりになるドットをHTML & CSSで描画する
- 見えないマウスカーソルの位置に合わせて、JSでドットを移動させる
マウスカーソルを「変更する」のではなく、「非表示にして新しく作る」というのがポイント。
この発送を思いつければ、あとは以前記事にしたマウスストーカーを作る方法とほぼほぼ同じコードで実装できます。
では、実際にコードを書いていきましょう〜。
手順１：カーソル用のdivタグを設置する
まずはHTML側で擬似的なマウスカーソルとして表示させるdivタグを設置しておきます。
body直下であればどこでも構いません。
例：body閉じタグ直前に配置しておく
<body>
<!-- その他のコンテンツ -->
<div id="cursor"></div>
</body>このdivタグをJSで取得できるように、IDやクラス名をつけておきましょう。
（今回は例として、cursorというIDをつけておきました。）
手順２：CSSでdivタグを小さなドットとして表現する
先ほど設置したdivタグを、小さなドットとして描画させます。
例：半透明の黒くて小さいドットにする
#cursor{
transform: translate(0,0);
pointer-events: none;
position: fixed;
top: -4px; //座標調節（カーソル位置と円の中心を合わせる）
left: -4px; //座標調節（カーソル位置と円の中心を合わせる）
width: 8px; //カーソルの直径
height: 8px; //カーソルの直径
background: rgba(0,0,0,0.75);
border-radius: 50%;
z-index: 999;
transition: width .3s, height .3s, top .3s, left .3s;
&.hov_{
top: -12px; //大きくなった分の座標調節
left: -12px; //大きくなった分の座標調節
width: 32px; //カーソルの直径
height: 32px; //カーソルの直径
background: rgba(200,50,50,0.75);
}
}直径8pxの小さいドットで、色はrgba(0,0,0,0.75)という少し半透明な黒色にしていますが、この辺はお好きにアレンジしてみてください。
positionはfixedにしていますが、これは後ほどJS側でマウスの位置に合わせて動かしていくためです。
&.hov_以降は、リンクホバー時のスタイルです。
直径32pxと少し大きな円になるので、それに合わせてtopとleftも調節しています。
手順３：CSSでデフォルトカーソルを非表示にする
デフォルトカーソルの代わりに表示させるドットの準備が整ってきたので、デフォルトカーソルは非表示にしておきましょう。
html,body,a{
cursor: none;
}htmlとbodyにcursor: none;を指定することで、デフォルトのマウスカーソルは非表示になります。
さらにリンクホバー時の「手のアイコン」カーソルも非表示にしておくため、aタグにも指定しています。
手順４：JSでドットをマウスカーソルに合わせて動かす
さて、あとは用意したドットを非表示にしたカーソルの代わりに動かしていくだけです。
divタグをマウスに合わせて動かすスクリプト
//準備
let cursorR = 4; //カーソルの半径
const cursor = document.getElementById('cursor'); //カーソル用のdivを取得
//上記のdivタグをマウスに追従させる処理
document.addEventListener('mousemove', function (e) {
cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
//リンクにホバー時はクラスをつける
const linkElem = document.querySelectorAll('a');
for (let i = 0; i < linkElem.length; i++) {
linkElem[i].addEventListener('mouseover', function (e) {
cursor.classList.add('hov_');
});
linkElem[i].addEventListener('mouseout', function (e) {
cursor.classList.remove('hov_');
});
}処理の流れをざっくり説明しておきます。
mousemoveイベントでマウスカーソルの座標を取得- その座標をドットの
translateに指定し、カーソル位置とドットを合わせる - リンクホバー時にはドットにクラス（
hov_）を付与する
とても単純な処理内容ですね。
おわりに - サイトに合わせて調節してね。
今回はリンクにホバーした時の挙動だけ作っていますが、フォームを設置している場合はテキストフォームにカーソルが乗ったときの挙動なども考えないといけないです。（ドットを消して標準のカーソルだけに戻すとか）
マウスストーカーと併用するとイイ感じになります
あと、今回のようなオリジナルのマウスカーソルに合わせて、マウスストーカーも加えてみるとさらにいい感じになると思います。
（オシャレな海外サイトがよくやってるやつ...）
