jsでマウスポインターの大きさやデザインを変更する方法

2024/05/28

デフォルトのマウスポインターに飽きていませんか？この記事では、視覚性を向上させ、個性的なデザインに変更するための手順やアイデアをご紹介します。カーソルを自分らしくカスタマイズして、より快適なデスクトップ環境を手に入れましょう。

bodyタグ内に要素を設置

bodyタグの中に空の要素を設置して、id属性をつけておきます。

<body>
 <div id="cursor"></div>
</body>

Javascriptの設定

先程の要素をid属性指定で取得し、座標位置をスタイルに付与します。
リンクにホバーした時にマウスポインターのデザインも変更したいので、
aタグにホバーした場合、is-activeクラスを付与しています。

// マウスポインター用のdivタグを取得してcursorに格納
const cursor = document.getElementById('cursor'); 
// マウスポインターホバー用クラス名
const activeClass = "is-active"

// マウスポインター用のdivタグをマウスに追従させる
document.addEventListener('mousemove', function (e) {
  //マウスポインターの座標位置を取得
  const x = e.clientX;
  const y = e.clientY;
  //マウスポインター要素のcssを書き換える用
  cursor.style.opacity = "0.75";
  cursor.style.top = y + "px";
  cursor.style.left = x + "px";
});

// リンクにホバーした時にクラス追加、離れたらクラス削除
const links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('mouseover', function (e) {
    cursor.classList.add('is-active');
  });
  links[i].addEventListener('mouseout', function (e) {
    cursor.classList.remove('is-active');   
  });
}

スタイルの調整

デフォルトのマウスポインターを削除

ページによって通常のマウスポインターを表示する場合も考えて、擬似要素のを:hasを利用しています。
bodyタグ内容に#cursorの要素が存在する場合にのみスタイルを割り当てています。
cursor: none;で通常のマウスポインターを表表示にしています。

body {
  &:has(#cursor) {
    cursor: none; // 通常のマウスポインターを表表示

    a {
      cursor: none; // ホバーした通常のマウスポインターを表表示
    }
}

自作マウスポインターのスタイル指定

マウスポインターのスタイルを指定します。

aタグホバー時に付与するようにしたis-activeクラスにもスタイルを割り振ります。

#cursor{
  position: fixed;

  /*丸の大きさと色の指定*/
  background: #000;
  border-radius: 10px;
  border: solid 1px #fff;
  box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.16);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px; /*真ん中にくるようにマイナスマージンで調整*/

  pointer-events: none; /*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  z-index: 100; /*一番手前に来るように*/
  transform: scale(1);

  &.is-active {
    transform: scale(1.5); 
  }
}

マウスポインターの注意点

Web上でマウスポインターを変えると、ユーザーが慣れているポインターと変わってしまうので、困惑する可能性もあります。
特に操作に不慣れなユーザーにとっては、通常のポインター以外を使用することで混乱やストレスを感じることがあります。
ユーザーエクスペリエンスを最優先に考える場合、標準的なポインターを維持する方が良いでしょう。

個人的には、コーポレートサイトでのイメージを与えるサイトには使えると思います。
例えば、高級ブランドやクリエイティブなデザインを重視する企業のウェブサイトでは、独自のマウスポインターを使用することで、ブランドの個性やサイトの雰囲気を強調することができます。
この場合、ユーザーがサイト全体のテーマやデザインに一貫性を感じることで、特別な体験を提供することが可能です。