マウスストーカーとは…
ズバリ！コレですね。 マウスにストーカーするもの = マウスストーカー
STEP1 ▶ body要素内にストーカーにする要素を設置する。
HTML
<div id = "stalker"></div>
HAML
#stalker
適当なstalker要素を作ってください。
STEP2 ▶ CSSで見た目を作る → 位置を決める → アニメーションの設定
SCSS CSS
#stalker{
//🔻見た目の部分(ストーカーの本体)
width: 16px; //マウスストーカーの直径(横幅)
height: 16px; //マウスストーカーの直径(縦幅)
background-color: rgba(228, 58, 210, .9); (ストーカーの色)
border-radius: 50%; //要素を丸くします
//🔺見た目の部分 (ストーカーの本体)
//※ココを簡潔に言うと、丸を作ってます。個々のプロパティは勉強してみてください。
//🔻位置に関してのCSS
position: fixed; //要素を特定の位置に固定させる
top: -8px; //座標調節（カーソル位置と円の中心を合わせる）
left: -8px; //座標調節（カーソル位置と円の中心を合わせる）
z-index: 999; //レイヤーを引き上げる(レイヤー調整・奥行き調整)
pointer-events: none; //マウスイベントを消す。通常はdiv要素をクリックしたことになり、
aタグなどを押せなくなってしまう現象が起きるが、それを防ぐ為の記述。)
//🔺位置に関してのCSS
//※ここまでで簡潔に言うと、丸の位置を調整しています。個々のプロパティは勉強してみてください。
//🔻アニメーションに関してのCSS
transform: translate(0,0); //()内の数字に応じて移動するプロパティ,
後でJSで変更する処理を書くので、とりま入力だけ。
transition: transform 0.2s; //要素の動き 要素が変化するまでの時間を0.2秒にする。1秒じゃ遅い。
transition-timing-function: ease-out; //変化の度合い,開始時が早く→終了が緩やか↪
//🔺アニメーションに関してのCSS
}
STEP3 ▶ 要素の操作を行う → 終了
jQuery
if(location.pathname === "/"){
//今回はルートパスの場合のみの処理にしました。
function cursor() {
const stalker = document.getElementById('cursor');
//stalker定数に要素を取得して入れてましょう。
//上記のdivタグをマウスに追従させる処理
document.addEventListener('mousemove', function (e) {
stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
//マウスが動いた時に動きを与えます。
//動いたときには、ストーカー要素の位置を変更します。イベントが発生した時の位置をcilentXとYで指定してあげてるという感じです。
});
}
window.addEventListener('load',cursor);
}
一応動きは理解できましたが、個々のプロパティは、無数に生かせる場所が見いだせそうなので研究を重ねます。
以下のサイトを参考にさせていただきました。