CODEWITHSUNDEEP
javascriptjqueryhtmlcsscursor-position
Miguel
Miguel

Reputation: 310

Custom cursor wrong position after scrolling the page

I'm trying to get one of those fancy circular cursors with a following outside ring, that changes when you hover an image for example.

I found most of the code already built on codepen, but when i applied to a longer page, the cursors seems to be off by few too many pixels to be visible. It works fine until you start scrolling, as the scroll increases so does the offset and makes it pretty much useless if you scroll, you can't see the cursor.

Here is a modified codepen: https://codepen.io/miguelpppires/pen/xxKLreP

I'm almost 100% sure this is the issue, but i have no idea how to fix it:

$(document).on('mousemove', function(e) {

$('.cursor, .follower').css({
"transform": "translate3d(" + (e.pageX) + "px, " + (e.pageY) + "px, 0px)"
});

Any and all help is appreciated, Thanks

Upvotes: 2

Views: 2467

Answers (3)

Martin Meza
Martin Meza

Reputation: 1

I have resolved issue using pageX and pageY insted of clientX and clientY.

Upvotes: 0

Patel Disha
Patel Disha

Reputation: 219

I have resolved issue using pageX and pageY insted of clientX and clientY.

Upvotes: 0

MauriceNino
MauriceNino

Reputation: 6747

You need to use clientX and clientY, becuase pageX and pageY take the offset from the top of the page and clientX and clientY take the offset from the top of the viewport.

$('.cursor, .follower').css({
   "transform": "translate3d(" + (e.clientX) + "px, " + (e.clientY) + "px, 0px)"
});

Upvotes: 2

Related Questions