ホーム
マウスストーカー

マウスストーカー

プレビュー

別タブで表示する

簡易解説

マウスカーソルの動きを追従するエフェクトの実装方法です。

コードの紹介

html

  <div class="cursor-stalker"></div>

CSS

/* style.css */
body {
  /* margin: 0;
  padding: 0;
  height: 100vh; */
  display: block;
  overflow: hidden;
  background-color: #f0f0f0;
}

.cursor-stalker {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #00b976;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

JavaScript(bodyの閉じタグの前に記載するコード)

<script>
document.addEventListener("DOMContentLoaded", () => {
  const stalker = document.querySelector(".cursor-stalker");

  document.addEventListener("mousemove", (e) => {
    const x = e.clientX;
    const y = e.clientY;

    stalker.style.transform = `translate(${x}px, ${y}px)`;
  });
});

</script>