マウスカーソルをJSでデザインする。
パソコンでご覧の方はもうお気づきかとは思いますが、マウスカーソルをオシャレにしてみました。
サイトリニューアルしたため、この記事のみマウスカーソルのデザインを変更しています。
カーソルをシンプルな黒ドットにしたうえで、ゆったり追従してくるストーカー（黄色の円）を加えました。
ストーカーはリンクのaタグ上に乗せると少し大きくなります。
実装方法
実装方法を簡単にまとめると、
デフォルトのマウスカーソルを非表示にする。 →
HTMLとCSSでドットを作る。 →
JSでマウスカーソルの位置に合わせ移動させる。
の3STEPです。
コード
01. デフォルトのマウスカーソルを非表示にする
▼ CSS
html,body,a{
cursor: none;
}これは単純。CSSでカーソルを非表示にします。
cursor – CSS: カスケーディングスタイルシート | MDN
02. HTMLとCSSでドットを作る
▼ HTML
<body>
<div id="cursor"></div>
<div id="stalker"></div>
まずは「マウスカーソル用」と「追従するストーカー用」に2つ、空のdivタグを作っておきます。
<body></body>の直下であればどこでも構いませんが、頭かお尻が分かりやすいです。
▼ CSS
#cursor{
pointer-events: none;
position: fixed;
top: -4px;
left: -4px;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 1.0);
transform: translate(-100px,-100px);
border-radius: 50%;
z-index: 999;
}
#stalker {
pointer-events: none;
position: fixed;
top: -16px;
left: -16px;
width: 32px;
height: 32px;
background: rgba(253, 254, 0, 0.8);
border-radius: 50%;
transform: translate(-100px,-100px);
transition: transform 0.2s;
transition-timing-function: ease-out;
z-index: 998;
}マウスカーソルは8pxの円、ストーカーは32pxの円。あとでマウスの位置に合わせるためにposition:fixedをつけています。
初期状態で画面外に置いておきたいのでtranslateをマイナスに設定。
ストーカーはほんの少し動きを遅らせたいので、transitionで遅らせます。
03. JSでマウスカーソルの位置に合わせ移動させる
▼ JavaScript
<script>
let cursorR = 4; //カーソルの半径
const cursor = document.getElementById('cursor'); //カーソル用のdivを取得
const stalker = document.getElementById('stalker'); //ストーカー用のdivを取得
//マウスに追従させる処理
document.addEventListener('mousemove', function (e) {
stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
//aタグにホバー中かどうかの判別フラグ
let hovFlag = false;
//aタグにホバーしたときに、ストーカーにクラスを追加
const linkElem = document.querySelectorAll('a');
for (let i = 0; i < linkElem.length; i++) {
//マウスホバー時
linkElem[i].addEventListener('mouseover', function (e) {
hovFlag = true;
//ストーカーにクラスを追加
stalker.classList.add('hov_');
});
//マウスホバー解除時
linkElem[i].addEventListener('mouseout', function (e) {
hovFlag = false;
stalker.classList.remove('hov_');
});
}
</script>ポインタの位置を調べて、その座標でtranslateの値を書き換えることでマウスの動きに合わせています。
12行目からはホバー時に動きをつけるために、aタグにホバーしたときストーカーに「hov_」というクラスを追加するようにしています。
▼ CSS
#stalker.hov_{
top: -40px;
left: -40px;
width: 80px;
height: 80px;
transition: .15s;
background: rgba(253, 254, 0, 0.5);
}そのうえで、マウスホバー時のCSSを追記。
大きさを大きくして透明度を上げました。
まとめ
コードをまとめますと、
▼ HTML
<body>
<div id="cursor"></div>
<div id="stalker"></div>▼ CSS
html,body,a{
cursor: none;
}
#cursor{
pointer-events: none;
position: fixed;
top: -4px;
left: -4px;
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 1.0);
transform: translate(-100px,-100px);
border-radius: 50%;
z-index: 999;
}
#stalker {
pointer-events: none;
position: fixed;
top: -16px;
left: -16px;
width: 32px;
height: 32px;
background: rgba(253, 254, 0, 0.8);
border-radius: 50%;
transform: translate(-100px,-100px);
transition: transform 0.2s;
transition-timing-function: ease-out;
z-index: 998;
}
@media screen and (max-width:768px){
#cursor, #stalker {
display: none;
}
}
#stalker.hov_{
top: -40px;
left: -40px;
width: 80px;
height: 80px;
transition: .15s;
background: rgba(253, 254, 0, 0.5);
}▼ JavaScript
<script>
let cursorR = 4; //カーソルの半径
const cursor = document.getElementById('cursor'); //カーソル用のdivを取得
const stalker = document.getElementById('stalker'); //ストーカー用のdivを取得
//マウスに追従させる処理
document.addEventListener('mousemove', function (e) {
stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
//aタグにホバー中かどうかの判別フラグ
let hovFlag = false;
//aタグにホバーしたときに、ストーカーにクラスを追加
const linkElem = document.querySelectorAll('a');
for (let i = 0; i < linkElem.length; i++) {
//マウスホバー時
linkElem[i].addEventListener('mouseover', function (e) {
hovFlag = true;
//ストーカーにクラスを追加
stalker.classList.add('hov_');
});
//マウスホバー解除時
linkElem[i].addEventListener('mouseout', function (e) {
hovFlag = false;
stalker.classList.remove('hov_');
});
}
</script>こうなります。
CSSで、スマホとタブレットのときは非表示にする記述も追記しています。
ホバー時にさりげなくアニメーションつけても面白そう。
