Custom cursor wrong position after scrolling the page

Question

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

Answer 1

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)"
});