JavaScriptでマウスストーカーを実装する方法
1010 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptでマウスストーカーを実装する方法を解説します。
目次
デモ
下記を見て欲しいのですがマウスを動かすと青い色の円が追いかけてきます。
これがマウスストーカーです。
リンクの上にマウスを乗せると青い円が黄色い円に変わりますがまずは青い円の実装方法を解説します。
id属性の記述
マウスストーカーを表示するページのHTMLに当たるファイルにid属性の記述をします。
<div id="mouse-stalker"></div>cssの記述
マウスストーカーを表示するページにCSSの記述をします。
//マウスストーカー
#mouse-stalker{
pointer-events: none;
position: fixed;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
background-color:rgba(113,181,245,.5);
border-radius: 50%;
transform: translate(0,0) scale(1.1);
transition: all 0.3s ease-out;
z-index: 9999;
}7行目・8行目で青い円の大きさを指定して4行目・5行目・6行目で青い円がマウスの真ん中に配置される様にしています。
JavaScriptの記述
マウスストーカーを表示するページにJavaScriptを読み込む為の記述をします。
bodyタグを閉じる直前に記述します。
<script type="text/javascript" src="{{ asset('js/work-product.js') }}"></script>
</body>そしてJavaScriptのコードの記述をします。
//マウスストーカー
const mouse = document.getElementById('mouse-stalker');
document.addEventListener('mousemove', function (e) {
mouse.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});2行目でid属性のセレクタの取得をします。
4行目・6行目でマウスが動いている時の挙動を設定します。
5行目の「.clientX」はブラウザ左上からのx座標の位置を取得して「.clientY」はブラウザ左上からのY座標の位置を取得していますがこの行がある事でマウスが動くたびに青い円の位置を取得しなおしてマウスについて来る様に見せています。
これでマウスストーカーの出来上がりです。
次はマウスをリンク（aタグ）に乗せた時に円を少し大きくして円の色を変えるのを実装します。
リンクにマウスを乗せた時の円の大きさと色を変える方法
↓の黄色の円を実装しますが多分難しくないと思います。
クラスを付ける
aタグにクラスを付けます、これをする事で全てのaタグで円の大きさ・色を変えるのではなく特定のaタグの時に実現できます。
クラス名は「hover」とします。
<a class="hover">クラス名をhoverにする</a>
CSSの記述
CSSに追記をします。
//マウスストーカー
#mouse-stalker{
pointer-events: none;
position: fixed;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
background-color:rgba(113,181,245,.5);
border-radius: 50%;
transform: translate(0,0) scale(1.1);
transition: all 0.3s ease-out;
z-index: 9999;
}
//ここから追加
.link-hover {
width: 50px!important;
height: 50px!important;
background-color:rgba(255,191,0,0.5)!important;
}
//ここまで追加JavaScriptの記述
JavaScriptの追記をします。
//マウスストーカー
const mouse = document.getElementById('mouse-stalker');
const link = document.querySelectorAll(".hover"); //この行を追加
document.addEventListener('mousemove', function (e) {
mouse.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
//ここから追加
//リンクにマウスオーバーすると円が大きくなる
for(let i = 0; i < link.length; i ++){
link[i].addEventListener('mouseenter', () => {
mouse.classList.add('link-hover');
});
link[i].addEventListener('mouseleave', () => {
mouse.classList.remove('link-hover');
});
}
//ここまで追加3行目でクラス名がhoverになっている全てのaタグを取得します。
querySelectorAllを使うのでaタグは配列に格納されてそれを使う為にfor文を使いますが12行目〜19行目です。
13行目はhoverクラスのaタグにマウスを乗せた時で16行目はhoverクラスのaタグからマウスを外した時という意味です。
14行目でクラスがhoverのaタグにマウスを載せた時にlink-hoverクラスを付けて青い円を変化させて17行目でクラス名がhoverのaタグからマウスを外した時にlink-hoverクラスを外して青い円に戻します。
これでマウスストーカーの実装が完成しました。