マウスストーカーとは…

ズバリ！コレですね。　マウスにストーカーするもの =　マウスストーカー

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

一応動きは理解できましたが、個々のプロパティは、無数に生かせる場所が見いだせそうなので研究を重ねます。

以下のサイトを参考にさせていただきました。