JavaScriptでマウスストーカーを実装する方法

702 回閲覧されました

公開日 : 2023年9月2日

みなさんこんにちは、jonioです。

今回はJavaScriptでマウスストーカーを実装する方法を解説します。

デモ

↓を見て欲しいのですがマウスを動かすと青い色の円が追いかけてきます。

これがマウスストーカーです。

リンクの上にマウスを乗せると青い円が黄色い円に変わりますがまずは青い円の実装方法を解説します。

私はLaravelの環境に実装しましたが言語は何でも実装方法は同じです。

マウスストーカーを表示するページのHTMLに当たるファイルにid属性の記述をします。

マウスストーカーを表示するページにCSSの記述をします。

7行目・8行目で青い円の大きさを指定して4行目・5行目・6行目で青い円がマウスの真ん中に配置される様にしています。

マウスストーカーを表示するページにJavaScriptを読み込む為の記述をします。

bodyタグを閉じる直前に記述します。

そしてJavaScriptのコードの記述をします。

2行目でid属性のセレクタの取得をします。

4行目・6行目でマウスが動いている時の挙動を設定します。

5行目の「.clientX」はブラウザ左上からのx座標の位置を取得して「.clientY」はブラウザ左上からのY座標の位置を取得していますがこの行がある事でマウスが動くたびに青い円の位置を取得しなおしてマウスについて来る様に見せています。

これでマウスストーカーの出来上がりです。

次はマウスをリンク（aタグ）に乗せた時に円を少し大きくして円の色を変えるのを実装します。

↓の黄色の円を実装しますが多分難しくないと思います。

aタグにクラスを付けます、これをする事で全てのaタグで円の大きさ・色を変えるのではなく特定のaタグの時に実現できます。

クラス名は「hover」とします。

CSSに追記をします。

JavaScriptの追記をします。

3行目でクラス名がhoverになっている全てのaタグを取得します。

querySelectorAllを使うのでaタグは配列に格納されてそれを使う為にfor文を使いますが12行目〜19行目です。

13行目はhoverクラスのaタグにマウスを乗せた時で16行目はhoverクラスのaタグからマウスを外した時という意味です。

14行目でクラスがhoverのaタグにマウスを載せた時にlink-hoverクラスを付けて青い円を変化させて17行目でクラス名がhoverのaタグからマウスを外した時にlink-hoverクラスを外して青い円に戻します。

これでマウスストーカーの実装が完成しました。