0

I created a custom cursor that follows the mouse. I would like to have the custom circle grow larger when hovered over links. The problem that I am having is that when the circle animates to a larger circle, it no longer is centered to the cursor. I'm not too sure how to keep the custom circle centered as it grows in size. The code below is the JS used to have the custom circle follow the cursor. Thank you in advance!

let clientX = -100;
let clientY = -100;
const innerCursor = document.querySelector(".cursor--small");

const initCursor = () => {

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

  const render = () => {
    innerCursor.style.transform = `translate(${clientX}px, ${clientY}px)`;

    requestAnimationFrame(render);
  };

  requestAnimationFrame(render);
};

initCursor();
IsaiahGore96
  • 15
  • 2
  • I am not really sure how to help with this one I just wanted to give you advice on this subject. Be really careful when messing with the look of a cursor. Not many people like when you change it, it's kinda out of fashion now. Hope you find your answer. – Andreja Zivanovic May 11 '21 at 20:26
  • @AndrejaZivanovic Thank you for your response. I am not changing the actual cursor a great example would be cuberto.com. The cursor has a circular div that follows the mouse. That was what I was trying to accomplish. I was able to solve the issue with the help of John Tyner below. – IsaiahGore96 May 12 '21 at 02:53

1 Answers1

0

It's not possible to programmatically move the user's cursor. You can lock it into a position, but that would create a bad UX and is probably problematic in other ways (cross browser issues).

https://stackoverflow.com/a/19870963/1772933

I would suggest creating a larger 'hit' area for the hover using styles.

a.cursor-thing{
display:inline-block;
padding:20px;
margin:-20px;
}

a.cursor-thing:hover{
background:#f00;
}
Here is a sentence where you can <a href='#' class='cursor-thing'>hover over me</a> or even  <a href='#' class='cursor-thing'>hover over me</a>.
Kinglish
  • 23,358
  • 3
  • 22
  • 43