コピペでOK！マウスの動きに合わせて
デザインを移動させる方法

2023.11.09

はじめに

概要

本ページで実装中のマウスの動きに合わせて、円を移動させる方法を解説します。こちらのJavascriptを用いてアニメーションさせています。

目的

実装に必要なコード
コードの説明
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装に必要なコード

HTML:

<div class="mouse"></div><!-- /.mouse -->

クラス名は任意です。ここではmouseとしています。

CSS：

.mouse {
   width: 24px;
   height: 24px;
   background: red;
   border-radius: 50%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   pointer-events: none;
 }

どのようなデザインでも結構です。ここでは赤い円を作成しました。

Javascript:

// ".mouse" クラスを持つ最初の要素を取得して、変数 mouse に格納します。
const mouse = document.querySelector(".mouse");
// デバッグのため、mouse の内容をコンソールに出力します。
console.log(mouse);

// ウィンドウ上でマウスが動いたときに発火するイベントリスナーを設定します。
window.onmousemove = (e) => {
  // マウスの現在のX座標から、要素の幅の半分を引いて、要素の中心がカーソルに来るようにします。
  const x = e.clientX - mouse.offsetWidth / 2;
  // マウスの現在のY座標から、要素の高さの半分を引いて、同じく要素の中心がカーソルに来るようにします。
  const y = e.clientY - mouse.offsetHeight / 2;

  // translate CSSプロパティを用いて要素を移動させるためのオブジェクトです。
  const mouseMoveStyle = {
    transform: `translate(${x}px,${y}px)`, // X軸とY軸に沿って要素を動かすスタイルを設定
  };

  // X座標とY座標をコンソールに出力します（デバッグ用）。
  console.log(x);
  console.log(y);

  // mouse 変数に格納された要素にアニメーションを適用します。
  // 第一引数はアニメーションのキーフレーム（ここでは移動のスタイル）、
  // 第二引数はアニメーションのオプションです。
  mouse.animate(mouseMoveStyle, {
    duration: 1000, // アニメーションの継続時間は1000ミリ秒（1秒）
    fill: "forwards", // アニメーションが完了した後も要素を最終状態に保持します
  });
};

コメントとコンソール付きでコードを記述しております。詳細は以下の通りです。

コードの解説

要素の選択:

document.querySelector(“.mouse”)を使って、.mouse クラスを持つ最初の要素を選択し、これをmouse変数に格納します。

デバッグ情報の出力:

console.log(mouse)を使って、選択した要素をコンソールに出力します。これにより、開発者はスクリプトが正しく要素を取得できているかを確認できます。

イベントリスナーの設定:

window.onmousemoveに関数を割り当てることで、マウスが動いたときにその関数が呼び出されるようにします。

マウスの追跡とテンプレートリテラル:

イベントリスナー内の関数では、マウスの座標に基づいて要素を画面上で動かすための計算を行います。
テンプレートリテラルはバッククォート（`）を使用し、${expression}の形式で変数や式の値を文字列中に埋め込むことを可能にします。
このコードでは、translate(${x}px,${y}px)の形でテンプレートリテラルを使い、xとy変数の値をCSSのtransformプロパティの値に動的に埋め込んでいます。これにより、mouse要素がマウスカーソルの位置に合わせて移動します。

アニメーションの適用:

mouse.animate()関数を用いて、計算した位置に要素をアニメーションします。
mouseMoveStyleオブジェクトはCSSのtransformプロパティを使用し、要素を新しい位置に動かすためのスタイルを定義します。
animate()関数の第二引数はアニメーションのオプションを指定します。この場合、アニメーションの継続時間は1000ミリ秒（1秒）、そしてアニメーション終了後も要素を最終状態に保つためにfill: “forwards”が指定されています。
このコードにより、ユーザーがマウスを動かすたびに、.mouse クラスを持つHTML要素がスムーズにカーソルの動きに追従するアニメーションをするようになります。

まとめ