Create a Cursor Tracker with HTML/CSS/JS

Create a Cursor Tracker with HTML/CSS/JS

Cursors-Tracker I mean that it will keep track of where the cursor is positioned on the page. The position of the cursor can be utilized to add some appealing features to your websites.

I chose Gojo (JJK) as a Cursor Tracker and the background of Tokyo as GOJO LOVES TOKYO

In the example that was just shown, I am moving the cursor across the entire document. However, you can also move the cursor within a div. How you decide to use this feature is entirely up to your creativity.

Let's create now.

  • HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Custom Tracker</title>
  </head>
  <body>
    <div class="tracker">
      <img src="https://custom-tracker-gojo-in-tokyo.vercel.app/gojo.png" alt="" srcset="" />
    </div>
  </body>
</html>
  • CSS


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

body {
  background: url('https://custom-tracker-gojo-in-tokyo.vercel.app/bg.jpeg') center no-repeat;
  background-size: cover;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow-x: hidden;
  font-weight: 300;
}


.tracker {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 500px;
  z-index: 9999;
  pointer-events: none;
  transition: all .15s;
}
.tracker img{
  width: 50%;
  height: 100%;
}
  • JavaScript

      const tracker = document.querySelector(".tracker");
      document.body.addEventListener("mousemove", (e) => {
        tracker.style.left = `${e.clientX}px`;
        tracker.style.top = `${e.clientY}px`;
      });
  • How it work ?

The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.

for more : MDN Reference

GitHub Link | Live Demo

Did you find this article valuable?

Support Aadarsh Kashyap by becoming a sponsor. Any amount is appreciated!