マウスストーカーは、マウスの座標を取得して、動きに合わせて追従させたいものを動かすもので、ユーザーの見失い防止や、任意のオブジェクトの強調に役立ちます。
比較的、海外のサイトでよく見かけます。
スマホ全盛の今ではあまり使い所がなく、使い方によっては、多少目障りかもしれませんが、この記事ではJavaScriptでのマウスストーカー実装方法について解説します。
実装のデザインサンプル
早速、実装のデザインサンプルで、このページでもこのスニペットを実装しています。
マウスを追従する丸ポッチが、a button label タグをhoverすると、丸ポッチが少し大きくなりイラストもひょっこり表示されます。
パソコン専用のスニペットで、指定のタグにオンマウスするとひょっこりイラストが出ます。
実装の方法と手順
このスニペットの実装の方法についてです。順に見ていきましょう。
実装したいページに、以下のHTMLのコードを設置します。
場所は <body>〜</body> の中のなるべく先頭の方に書きましょう。
<div id="cursor"></div>次に見た目を整えるCSSを設置します。
#cursor {
transform: translate(0, 0);
pointer-events: none;
position: fixed;
top: -7px;
left: -4px;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
z-index: 999;
transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}
#cursor.hover{
top: -18px;
left: -18px;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.05);
border: solid 2px #6bb6ff;
}
#cursor.hover:before {
content: "";
width: 60px;
height: 60px;
position: absolute;
bottom: 55%;
left: 50%;
transform: translateX(-50%);
background: url(https://dubdesign.net/wp-content/uploads/2021/10/sangoplus_001-2-1.svg) no-repeat;
}:before の擬似要素に、backgroundプロパティへ表示させる画像を入れます。
最後に、JavaScriptを<body>〜</body> のクロージングタグ前にコピペします。
//PC限定で一番最後に実行
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
document.addEventListener("DOMContentLoaded", function() {
//準備
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)';
});
//aタグとbuttonタグにclass付与
const linkElem = document.querySelectorAll('a,button,label,.acc-btn');
for (let i = 0; i < linkElem.length; i++) {
linkElem[i].addEventListener('mouseover', function (e) {
cursor.classList.add('hover');
});
linkElem[i].addEventListener('mouseout', function (e) {
cursor.classList.remove('hover');
});
}
});
}これで設置は完了です。
コピペ用コード一式
この記事で紹介のHTML・CSS・JavaScriptのコード一式です。
上記手順で紹介のコードと同じです。
コードを表示する
<div id="cursor"></div>#cursor {
transform: translate(0, 0);
pointer-events: none;
position: fixed;
top: -7px;
left: -4px;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 0.75);
border-radius: 50%;
z-index: 999;
transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}
#cursor.hover{
top: -18px;
left: -18px;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.05);
border: solid 2px #6bb6ff;
}
#cursor.hover:before {
content: "";
width: 60px;
height: 60px;
position: absolute;
bottom: 55%;
left: 50%;
transform: translateX(-50%);
background: url(https://dubdesign.net/wp-content/uploads/2021/10/sangoplus_001-2-1.svg) no-repeat;
}//PC限定で一番最後に実行
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
document.addEventListener("DOMContentLoaded", function() {
//準備
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)';
});
//aタグとbuttonタグにclass付与
const linkElem = document.querySelectorAll('a,button,label,.acc-btn');
for (let i = 0; i < linkElem.length; i++) {
linkElem[i].addEventListener('mouseover', function (e) {
cursor.classList.add('hover');
});
linkElem[i].addEventListener('mouseout', function (e) {
cursor.classList.remove('hover');
});
}
});
}ざっくりとしたコードの解説
ざっくりとしたコードの解説です。
CSS：cursorと擬似要素
ページ内タグのa button label に、オンマウスすることでcursor idに hover のclassが付きます。
そして、hover のclassがついた時に:before の擬似要素をつけてイラストを表示させたりします。
#cursor.hover:before {
/* この中にCSSプロパティ */
}イラストを表示させない場合は、上記一式削除すればイラストは表示無しになります。
JavaScript：スマホ以外で読み込み完了後実行
冒頭の navigator.userAgent.match でスマホ以外で実行されるようにして、iPhone | iPad | iPod | Android の端末では実行されないようにします。
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
document.addEventListener("DOMContentLoaded", function() {参考サイト
参考JavaScriptでマウスカーソルを小さいドットに変更する方法【jQueryなし】WEMO.tech
