マウスカーソルを変えてみる
2023年5月25日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、マウスカーソルの形を矢印から丸に変えてみたいと思います。
参考：株式会社エヴォワークス -EVOWORX-｜イケてるマウスカーソルを簡単に実装する
参考：SPIQA NOTE｜【初心者向け】おしゃれなマウスカーソルを簡単に実装する方法【Javascript】
マウスカーソル設定
まずは<body>の直下に<div>タグを設置します。IDをcursor、クラスもcursorとしておきます。
<div id="cursor" class="cursor"></div>デフォルトのカーソルを非表示にします。
うちのサイトはボタンとかチェックボックスとかをcursor:pointerにしているのでそれらもまとめて非表示にします。
html, body, a, button, input[type=checkbox] {
cursor: none;
}カーソルの見た目を設定します。直径20pxの円形で、色は半透明の水色にしてみました。
.cursor {
position: fixed;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(79, 195, 247, 0.5);
z-index: 9999;
transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s;
transform: translate(0, 0);
pointer-events: none;
}ここでponter-event:noneにしておかないとクリックできなくなります。
以下のスクリプトを記述します。
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function (e) {
cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});これはどういう意味だろう。#cursorを取得して.cursorのCSSに現在のカーソルの位置を代入するということでしょうか。
ホバーで見た目を変更
クリックできる部分にカーソルが乗ると水色がピンクになって、さらに大きくなるように設定してみます。
.cursor.cursor--hover {
top: -40px;
left: -40px;
width: 80px;
height: 80px;
background: rgba(240, 98, 146, 0.5);
}以下のスクリプトを追記します。
var link = document.querySelectorAll('a,button,input,label');
for (var i = 0; i < link.length; i++) {
link[i].addEventListener('mouseover', function (e) {
cursor.classList.add('cursor--hover');
});
link[i].addEventListener('mouseout', function (e) {
cursor.classList.remove('cursor--hover');
});
}うーん...このforとi++がまだよくわかっていません（繰り返し処理？）マウスを乗せたら .cursorに.cursor--hoverを付与して、マウスを外したら.cursor--hoverが外れる、ということをやっているんだなーというのはなんとなくわかります。
まとめ
最初に左上にチラっと見えているのをなんとかしたいですね。
全ページに適用するのは大変そうなのでまだやめておきます！
