【脱 jQuery】 Vanilla JS でマウスストーカー作成

2022年3月11日2022年10月16日

URLをコピーしました！

マウスカーソルに追従する「マウスストーカー」の作り方を学習しました。
jQueryを使わずに、素のJavaScriptで書いてみました。

作成していて、学んだことを備忘録としてまとめていきます。

完成サンプル

CodeSandBoxを使って、サンプルを作成しました。

以下より、HTML・CSS・JavaScriptのコードを順に書いていきます。

HTML作成

HTMLのコードはこちら↓

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mouse Stalker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="stalker.js" defer></script>
  </head>
  <body>
    <div class="l-container">
      <h1>マウスストーカー撲滅！</h1>
      <div class="l-spacer">
        <button class="c-button" type="submit">button要素</button>
        <a href="#" class="c-button">a要素</a>
      </div>
    </div>
  </body>
</html>

CSS作成

CSSのコードはこちら↓

.c-stalker {
  /*マウスストーカーの位置調整*/
  position: fixed;
  top: -1em;
  left: -1em;
  pointer-events: none;　/*マウスストーカーをイベントの対象外にする*/
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  transition-property: width, height, background-color, transform;
  transition-timing-function: linear;
  transition-duration: 0.5s;
  z-index: 999;
}

//a要素やbutton要素がホバーされた時
.is-active.c-stalker {
  width: 5rem;
  height: 5rem;
  background-color: rgba(245, 188, 188, 0.5);
}

.c-button {
  display: inline-block;
  width: 300px;
  padding: 0.5rem 3em;
  border: 1px solid #000;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 3px;
  background-color: #f0f0f0;
}

.c-button + .c-button {
  margin-top: 2em;
}

@media (min-width: 767px) {
  .c-button + .c-button {
    margin-top: 0;
    margin-left: 0.5em;
  }
}

/* デフォルトスタイルリセットとレイアウト用 */

* {
  margin: 0;
  padding: 0;
  color: inherit;
  box-sizing: border-box;
}

button {
  appearance: none;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

a {
  display: block;
  text-decoration: none;
  width: 300px;
}

.l-container {
  max-width: 1280px;
  margin: 3rem auto;
  text-align: center;
}

.l-spacer {
  padding: 3em 0;
}

マウスストーカーの基準位置がウィンドウ画面になるようにposition:fixed;を指定しました。
また、イベントの対象外とするため、pointer-events:none;を指定しました。

その他のCSSは、要素の見た目調整やa要素やbutton要素がホバーされた時の挙動を指定しています。

JavaScript作成

JavaScriptのコードはこちら↓

class MouseStalker {
  constructor() {
    // マウスストーカー部分の要素を作成
    this.stalker = document.createElement("div");
    // href属性のついたa要素とbutton要素を全て取得
    this.linkElems = document.querySelectorAll("a[href],button");
    //要素がホバー中かどうかの判定
    this.hoverFlag = false;
    //マウスポインターのX座標の初期値
    this.posX = 0;
    //マウスポインターのY座標の初期値
    this.posY = 0;
    //デフォルトのマウスストーカーの大きさを縮小
    this.stalker.style.transform = `scale(.3)`;

    //処理
    this._init();
  }
  _init() {
    //マウスストーカーにclass属性「c-stalker」を追加
    this.stalker.classList.add("c-stalker");
    //body要素の末尾にマウスストーカー要素を追加
    document.body.appendChild(this.stalker);

    this._on();
  }

  _on() {
    //画面上でマウスが動いたらイベント発生
    document.addEventListener("mousemove", this._move.bind(this));
    this.linkElems.forEach((elem) => {
      //href属性を持つa要素やbutton要素にマウスが乗るとイベント発生
      elem.addEventListener("mouseover", this._mouseover.bind(this));
      //href属性を持つa要素やbutton要素にマウスが離れるとイベント発生
      elem.addEventListener("mouseleave", this._mouseleave.bind(this));
    });
  }

  _mouseover() {
    //class属性「is-active」をマウスストーカーに追加
    this.stalker.classList.add("is-active");
  }
  _mouseleave() {
　　 //class属性「is-active」をマウスストーカーから削除
    this.stalker.classList.remove("is-active");
  }

  _move(e) {
    //X座標の位置を取得
    this.posX = e.clientX;
    //Y座標の位置を取得
    this.posY = e.clientY;
    //transformプロパティにthis.posXとthis.posYを追加
    this.stalker.style.transform = `translate(${this.posX}px,${this.posY}px)`;
  }
}

new MouseStalker();

コードの詳細はコメントアウトに書かれている通りです。
一行一行のコードを翻訳すると、「理解できている点と理解できていない点」が分かってきました。