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>
3 answers
solution1
2 2018-07-26 09:01:22
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>
solution2
1 ACCPTED 2018-07-26 08:36:11
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>
solution3
0 2020-08-31 16:19:46
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.