マウスカーソルに追従する「マウスストーカー」の作り方を学習しました。
jQueryを使わずに、素のJavaScriptで書いてみました。
作成していて、学んだことを備忘録としてまとめていきます。
完成サンプル
CodeSandBoxを使って、サンプルを作成しました。
以下より、HTML・CSS・JavaScriptのコードを順に書いていきます。
HTML作成
HTMLのコードはこちら↓
<!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" />
<title>Mouse Stalker</title>
<link rel="stylesheet" href="style.css" />
<script src="stalker.js" defer></script>
</head>
<body>
<div class="l-container">
<h1>マウスストーカー撲滅!</h1>
<div class="l-spacer">
<button class="c-button" type="submit">button要素</button>
<a href="#" class="c-button">a要素</a>
</div>
</div>
</body>
</html>
CSS作成
CSSのコードはこちら↓
.c-stalker {
/*マウスストーカーの位置調整*/
position: fixed;
top: -1em;
left: -1em;
pointer-events: none; /*マウスストーカーをイベントの対象外にする*/
display: block;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
transition-property: width, height, background-color, transform;
transition-timing-function: linear;
transition-duration: 0.5s;
z-index: 999;
}
//a要素やbutton要素がホバーされた時
.is-active.c-stalker {
width: 5rem;
height: 5rem;
background-color: rgba(245, 188, 188, 0.5);
}
.c-button {
display: inline-block;
width: 300px;
padding: 0.5rem 3em;
border: 1px solid #000;
font-size: 1.5em;
font-weight: bold;
border-radius: 3px;
background-color: #f0f0f0;
}
.c-button + .c-button {
margin-top: 2em;
}
@media (min-width: 767px) {
.c-button + .c-button {
margin-top: 0;
margin-left: 0.5em;
}
}
/* デフォルトスタイルリセットとレイアウト用 */
* {
margin: 0;
padding: 0;
color: inherit;
box-sizing: border-box;
}
button {
appearance: none;
cursor: pointer;
border: none;
background-color: transparent;
}
a {
display: block;
text-decoration: none;
width: 300px;
}
.l-container {
max-width: 1280px;
margin: 3rem auto;
text-align: center;
}
.l-spacer {
padding: 3em 0;
}
マウスストーカーの基準位置がウィンドウ画面になるようにposition:fixed;を指定しました。
また、イベントの対象外とするため、pointer-events:none;を指定しました。
その他のCSSは、要素の見た目調整やa要素やbutton要素がホバーされた時の挙動を指定しています。
JavaScript作成
JavaScriptのコードはこちら↓
class MouseStalker {
constructor() {
// マウスストーカー部分の要素を作成
this.stalker = document.createElement("div");
// href属性のついたa要素とbutton要素を全て取得
this.linkElems = document.querySelectorAll("a[href],button");
//要素がホバー中かどうかの判定
this.hoverFlag = false;
//マウスポインターのX座標の初期値
this.posX = 0;
//マウスポインターのY座標の初期値
this.posY = 0;
//デフォルトのマウスストーカーの大きさを縮小
this.stalker.style.transform = `scale(.3)`;
//処理
this._init();
}
_init() {
//マウスストーカーにclass属性「c-stalker」を追加
this.stalker.classList.add("c-stalker");
//body要素の末尾にマウスストーカー要素を追加
document.body.appendChild(this.stalker);
this._on();
}
_on() {
//画面上でマウスが動いたらイベント発生
document.addEventListener("mousemove", this._move.bind(this));
this.linkElems.forEach((elem) => {
//href属性を持つa要素やbutton要素にマウスが乗るとイベント発生
elem.addEventListener("mouseover", this._mouseover.bind(this));
//href属性を持つa要素やbutton要素にマウスが離れるとイベント発生
elem.addEventListener("mouseleave", this._mouseleave.bind(this));
});
}
_mouseover() {
//class属性「is-active」をマウスストーカーに追加
this.stalker.classList.add("is-active");
}
_mouseleave() {
//class属性「is-active」をマウスストーカーから削除
this.stalker.classList.remove("is-active");
}
_move(e) {
//X座標の位置を取得
this.posX = e.clientX;
//Y座標の位置を取得
this.posY = e.clientY;
//transformプロパティにthis.posXとthis.posYを追加
this.stalker.style.transform = `translate(${this.posX}px,${this.posY}px)`;
}
}
new MouseStalker();
コードの詳細はコメントアウトに書かれている通りです。
一行一行のコードを翻訳すると、「理解できている点と理解できていない点」が分かってきました。
学んだこと
今回、学んだことはマウスストーカーのイベントを対象外にすることです。
対象外にしなかったら以下のようになります↓
button要素にマウスが乗ると、マウスストーカーを大きくしているのですが、
まだ、マウスがbutton要素から離れていないのに、mouseleaveイベントが発生しています。
これは、button要素にマウスが乗っていたが、マウスストーカー用のdiv要素にマウスが乗ったので
mouseleaveイベントが発生しているためです。
解決策として、マウスストーカ用のdiv要素にpointer-events:none; でイベントを対象外にしています。
以上で終わりです。
マウスストーカーだけじゃなくいろんな動きを実装して、もっとJavaScriptと仲良くなりたいです。
最後まで読んでいただきありがとうございました!
参考サイト
参考にさせていただいたサイトを紹介します↓
・カーソルにくっついてくる「マウスストーカー」の作り方【リンクに吸い付く】