How to get position of mouse pointer in JavaScript

By tracking the mouse pointer, we can increase interactivity of our website.

Some things which we can do :-

• Dynamic Cursor: We can change our cursor's appearance based on its position.
• User-driven animation: We can animate elements based on how the user moves the cursor.
• Games: We can track the mouse to move the character according to the movement of the cursor.

... and there are endless possibilities.

Let us not learn how to do it.

We will make a div change its position according to our cursor and make it follow our cursor.

Note: In this tutorial I have only included those parts of the code that are required to move the mouse pointer and not the parts which displays its position on screen

<div id="follower"></div>

Here we have our div with id="follower", we will change its position to make it follow our cursor.

#follower {
  position: absolute;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background: whitesmoke;
  transition: 0.1s;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

First thing we do is we give our id a position of absolute. Which will enable us to change its position with respect to its container, in this case it is the view-port (the visible area of the webpage), because we have not explicitly mentioned position: relative in its container which is the body of our HTML. You can also add some transition, box-shadow, border-radius etc to make it look good.

let follower = document.querySelector("#follower");

let mouseFollower = (e) => {
    let x = e.clientX;
    let y = e.clientY;
    follower.style.top = y + "px";
    follower.style.left = x + "px";
        console.log(x + " " + y);
}

document.addEventListener("mousemove", (e) => {
    mouseFollower(e);
})

Now we will write some JavaScript.

• Select the HTML element with the id attribute set to "follower" and assign it to the variable follower.

let follower = document.querySelector('#follower');

• Make a function mouseFollower that accepts an event parameter e.

const mouseFollower = e => {};

• Save the value's of X and Y coordinates to 'x' and 'y' variables, e.clientX represents the X-coordinate, and e.clientY represents the Y-coordinate.

let x = e.clientX;
let y = e.clientY;

• Change the position of the div 'follower', for top we will use Y coordinates and for left we will use X coordinates.

follower.style.top = y + "px";
follower.style.left = x + "px";

• And we will console.log our x and y coordinates to see what is the position of our cursor. You can modify this code to even display it on your webpage.

console.log(x + " " + y);

You can use the position of your cursor to do more thing's. tag me on X showing somethings you make using this.

And we are done!

We have our cursor being tracked and a div following it.

Follow me on X and join me on my journey.