Circle Follow Mouse Cursor - Javascript

Question

I've found something I'd really like to implement into my website here - https://codepen.io/clementGir/pen/RQqvQx

It's some code that enabled a ball object to follow your cursor/mouse movements on a website. However, I've noticed an issue with the original code from within that CodePen. If the body height is set to for example 200vh instead of 100vh the cursor jumps down and bugs out when you scroll down below the content.

Change body to the following instead of 100vh to see the issue:

body {
  height: 200vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
}

Can anyone else replicate this and fix it at all? It would be amazing if someone could as it's really something I'd like to use and I'm not great at the JS side of things.

Thanks!

user3837893 · Accepted Answer · 2023-11-03 19:18:08Z

1

You have to subtract the amount of body that's scrolled out of view, like in my fork of your pen: https://codepen.io/geedix/pen/zYeovQg/4d27d54fad5e2372e3f154b616b79211

 y: e.pageY -window.scrollY - 7

answered Nov 3, 2023 at 19:18

user3837893

1757 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Circle Follow Mouse Cursor - Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related