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