Div to be centered over cursor

Question

I am trying to create a custom cursor using a <div> that is set to follow the cursor.

In the snippet below this is working really well, however when scrolling down the page, the div does not follow until the scroll movement is complete, resulting in a jerky movement and feel.

Is there a way to ensure this doesn't happen and the <div> follows the cursor perfectly regardless?

// vars
var $cursor = $('.custom-cursor');

// Follow cursor
$('body').on('mousemove', function(e) {
  var parentOffset = $(this).offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  $cursor.css({
    left: relX,
    top: relY
  });
});

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="custom-cursor">
  </div>
</body>

Your codepen is kept on reloading. Could you please fix it and in btw use StackOverflow snippet — Aravind S, Jul 26 '18 at 08:31
Try to put your code of positioning the div also in `scroll` event. — Programmer, Jul 26 '18 at 08:35
Here is a crazy+hacky cross-browser idea: unscrollable body with your cursor code. And scrollable div with rest of your content. — Gökhan Mete ERTÜRK, Jul 26 '18 at 08:39
The scroll event is called? the mouse positioin you get in the event hanler are good but the mouse doesn't move, or the values themself are not getting updated? — Programmer, Jul 26 '18 at 08:42
@JaromandaX - this is an option but the resolution is often compromised, and using a DIV allows for changing in scale/shape when hovering different elements. — dungey_140, Jul 26 '18 at 08:52

score 2 · Answer 1 · answered Jul 26 '18 at 09:01

Check this Updated Code. I hope it will help you.

   

var $cursor = $('.custom-cursor');

   // Follow cursor
   var xMousePos = 0;
   var yMousePos = 0;
   var lastScrolledLeft = 0;
   var lastScrolledTop = 0;

   $(document).mousemove(function(event) {
       captureMousePosition(event);
   })

   $(window).scroll(function(event) {
       if (lastScrolledLeft != $(document).scrollLeft()) {
           xMousePos -= lastScrolledLeft;
           lastScrolledLeft = $(document).scrollLeft();
           xMousePos += lastScrolledLeft;
       }
       if (lastScrolledTop != $(document).scrollTop()) {
           yMousePos -= lastScrolledTop;
           lastScrolledTop = $(document).scrollTop();
           yMousePos += lastScrolledTop;
       }
       $cursor.css({
           left: xMousePos,
           top: yMousePos
       });
   });

   function captureMousePosition(event) {
       xMousePos = event.pageX;
       yMousePos = event.pageY;
       $cursor.css({
           left: xMousePos,
           top: yMousePos
       });
   }

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="custom-cursor">
  </div>
</body>

Hi Ketan. This is working well but still 'jumps' a little at times, is there any way to improve this? I'm not sure what is causing it? — dungey_140, Jul 26 '18 at 09:32

Ullas Hunka · Accepted Answer · 2018-07-26T09:53:29.057

1

Insert this code in your code:

$( window ).scroll(function() {
  //Your mouse move function
});

And to get the current position of the mouse on scroll use Get mouse position on scroll.

Here is the link of fiddle http://jsfiddle.net/1byfq24g/ with the implemented code.

// vars
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
var $cursor = $('.custom-cursor');

// Follow cursor
$('body').on('mousemove', function(e) {
  var parentOffset = $(this).offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  xMousePos = relX;
  yMousePos = relY;

  $cursor.css({
    left: relX,
    top: relY
  });
});
$(window).scroll(function(event) {
  if (lastScrolledLeft != $(document).scrollLeft()) {
    xMousePos -= lastScrolledLeft;
    lastScrolledLeft = $(document).scrollLeft();
    xMousePos += lastScrolledLeft;
  }
  if (lastScrolledTop != $(document).scrollTop()) {
    yMousePos -= lastScrolledTop;
    lastScrolledTop = $(document).scrollTop();
    yMousePos += lastScrolledTop;
  }
  console.log("x = " + xMousePos + " y = " + yMousePos);
  $cursor.css({
    left: xMousePos,
    top: yMousePos
  });
});

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

<body>
  <div class="custom-cursor">
  </div>
</body>

edited Jul 26 '18 at 09:53

answered Jul 26 '18 at 08:36

Ullas Hunka

2,119
1
15
28

Thanks for the answer, could you help to translate this into a working example based on my original code? – dungey_140 Jul 26 '18 at 08:41
OK, I will surely post a fiddle for this. – Ullas Hunka Jul 26 '18 at 08:42
Here you go! Please upvote and accept if satisfies the need. – Ullas Hunka Jul 26 '18 at 09:04
Thanks so much for this, it works very well. It is still not 100% perfect and the div moves a little sometimes but generally much better. Is there any improvements that can be made? Also what is the -7.5 for? – dungey_140 Jul 26 '18 at 09:19
-7.5 is factor to center it. – Ullas Hunka Jul 26 '18 at 09:24
Updated as per requested. Have a look. – Ullas Hunka Jul 26 '18 at 09:53
Thanks, do you have any thoughts on improving the little bit of 'jumping' that still occurs? – dungey_140 Jul 26 '18 at 10:10
Yes, I will be improving it by tonight. – Ullas Hunka Jul 26 '18 at 10:14
Thank you! Much appreciated – dungey_140 Jul 26 '18 at 10:22
Any luck Ullas? – dungey_140 Jul 27 '18 at 09:11

score 0 · Answer 3 · answered Aug 31 '20 at 16:19

This is a really late answer, but I've been doing something really similar, and had the same problem. I've found that the simplest possible solution is to avoid all the js scroll animations and simply set the cursor to position:fixed; in css, which fixes your problem completely. The fix I'm guessing comes from the fact that during fixed it's always in relation to the viewport, and not the document itself. At any rate it works.

// vars
var $cursor = $('.custom-cursor');

// Follow cursor
$('body').on('mousemove', function(e) {
  var relX = e.clientX;
  var relY = e.clientY;
  $cursor.css({
    left: relX,
    top: relY
  });
});

body {
  background: red;
  height: 1000vh;
  position: relative;
}

.custom-cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  z-index: 9999;
  background-color: yellow;
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%); // Center over cursor
  transition: width .3s ease-in-out, height .3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="custom-cursor">
  </div>
</body>

Div to be centered over cursor

3 Answers3