CODEWITHSUNDEEP
javascriptjquerycsscursor
dungey_140
dungey_140

Reputation: 2802

Div to be centered over cursor

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>

Upvotes: 3

Views: 109

Answers (3)

Pranav Nair
Pranav Nair

Reputation: 35

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>

Upvotes: 0

Ullas Hunka
Ullas Hunka

Reputation: 2211

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>

Upvotes: 1

Ketan
Ketan

Reputation: 128

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>

Upvotes: 2

Related Questions