Central alignment of div with cursor

Question

Central alignment of div with cursor

I'm experimenting with creating a unique custom cursor using a <div> that trails the movement of the mouse pointer.

While the current setup works smoothly, I've noticed that when scrolling down the page, the div lags behind until the scrolling action is completed, resulting in a choppy appearance and experience.

Is there a way to prevent this issue and ensure that the <div> accurately follows the cursor without any delays?

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

// Track cursor movement
$('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>

javascript jquery css cursor

Answer 1

Answer №1

Take a look at this fresh piece of code. I believe it can be of assistance to you.

   

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

   // Track cursor movement
   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>

Answer 2

Take a look at this fresh piece of code. I believe it can be of assistance to you.

   

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

   // Track cursor movement
   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>

Answer 3

Answer №2

Copy and paste the following code snippet into your project:

$( window ).scroll(function() {
  //Your code for mouse movement goes here
});

To track the current position of the mouse while scrolling, refer to this article: Get mouse position on scroll.

You can view the implementation of the code in this JS Fiddle link: http://jsfiddle.net/1byfq24g/

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

// Track cursor movement
$('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>

Answer 4

Copy and paste the following code snippet into your project:

$( window ).scroll(function() {
  //Your code for mouse movement goes here
});

To track the current position of the mouse while scrolling, refer to this article: Get mouse position on scroll.

You can view the implementation of the code in this JS Fiddle link: http://jsfiddle.net/1byfq24g/

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

// Track cursor movement
$('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>

Answer 5

Answer №3

Although this answer may seem late, I have been facing a similar issue and found a straightforward solution that worked for me. By setting the cursor's CSS property to position:fixed;, all the scroll animation issues were resolved completely. This fix seems to function because when set to fixed, the cursor remains relative to the viewport rather than the document itself.

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

// Track cursor movement
$('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>

Answer 6

Although this answer may seem late, I have been facing a similar issue and found a straightforward solution that worked for me. By setting the cursor's CSS property to position:fixed;, all the scroll animation issues were resolved completely. This fix seems to function because when set to fixed, the cursor remains relative to the viewport rather than the document itself.

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

// Track cursor movement
$('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>

Central alignment of div with cursor

Answer №1

Answer №2

Answer №3

Similar questions

Tips for effectively running multiple XMLHttpRequests in a loop

First-character styling not applying to ID in CSS

Discover how to achieve the detail page view in Vue Js by clicking on an input field

State is causing a conflict by allowing multiple menus to open when mapping over Menu objects

I am interested in excluding the seconds and milliseconds from my date and time

What is the best way to verify if a class attribute includes a specific class or not?

The static menu is malfunctioning and is disrupting the smooth operation of the website

Server becoming unresponsive following the cancellation of an AJAX call

Setting a consistent theme or style for all HTML/React tags using a selector inside a specific component

The alignment of flexbox within a list item is not positioned at the top as expected

Grails Spring Security does not maintain user login status following an ajax call

'Without the need to refresh the page, assign a JavaScript variable from JSP on the server side.'

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

How to position a <div> in the center of a popup <div>

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

Tips for dynamically changing the number of visible ListItems in React using a single method

What is the best way to record data while initiating a process in node.js?

Styling HTML Text Using Your Own Unique CSS Class Style

Tips for repositioning a node element as the first child within its parent element

What is the process for changing one tag into a different tag?