要素に入ったときにポインターを任意の色の丸に変更してみる（備忘録）

/カテゴリ: , , , /作成者:

今回は、要素に入ったときにポインターを任意の色の丸に変更してみる実装をしてみました。丸の大きさや色、形はCSSで任意に変更できるようになっています。

個人的には、ホバー時や要素に入ったときにポインターが変わるのは好きではありませんが、結構見かけるため備忘録として残しています。

まずは基本的なパターンになりますが、応用編はまた後日記事にしていけたらと思います。

demo

HTMLの記述について

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>要素に入ったときにポインターを任意の色の丸に変更してみる（備忘録）</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <main>
    <div class="pointer-area">
    </div>
  </main>
  <script src="./style.js"></script>
</body>

</html>

HTMLはpointer-areaの要素を用意するためdivタグを設定しているだけです。

CSSの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  word-wrap: break-word;
}

img {
  width: 100%;
  vertical-align: bottom;
}

/* レイアウト設定 */
main {
  margin: 80px 0;
}

.pointer-area {
  background-color: #c3512f;
  height: 400px;
  cursor: none;
}

.custom-cursor {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  position: fixed;
  pointer-events: none;
  display: none;
}

custom-cursorは、JavaScript側でclassが追加される設定になっています。

custom-cursorでポインタの見た目を調整できるため、CSSをあてて設定していきます。

positionをfixedにしているのは、要素内でポインターが動いたときに、ポインターの位置にcustom-cursorで設定した白い丸の位置を合わせるために設定しています。JavaScript側でleftとtopの位置を動かしています。

JavaScriptの記述について

"use strict";

// DOMの読み込み完了後にスクリプトを実行します
document.addEventListener("DOMContentLoaded", () => {
  // .pointer-areaクラスを持つ要素を選択します
  const pointerArea = document.querySelector(".pointer-area");
  // カスタムカーソル用のdiv要素を作成します
  const cursor = document.createElement("div");
  // 作成したdivに'custom-cursor'クラスを追加します
  cursor.classList.add("custom-cursor");
  // 作成したdivをbodyの子要素として追加します
  document.body.appendChild(cursor);

  // pointerAreaにマウスが入った時の処理
  pointerArea.addEventListener("mouseenter", () => {
    cursor.style.display = "block"; // カスタムカーソルを表示します
  });

  // pointerArea上でマウスが動いた時の処理
  pointerArea.addEventListener("mousemove", (e) => {
    // カスタムカーソルの位置をマウスの位置に合わせます
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
  });

  // pointerAreaからマウスが出た時の処理
  pointerArea.addEventListener("mouseleave", () => {
    cursor.style.display = "none"; // カスタムカーソルを非表示にします
  });
});

詳細はコメントアウトで記載しているとおりです。

bodyの子要素にcustom-cursorのclassがついたdivタグを追加し、要素に入ったとき、動いているとき、出たときで処理をしています。

clientXやclientYについては、MDNで詳細をご確認ください。

以上になります。次回は応用的なものを紹介していけたらと思います。