WEB世界のストーカー

<div id = "stalker"></div>

#stalker

#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

}

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);
}