Image as cursor, should move when you scroll

user_9011747 0
Viewed 322

I replaced my cursor with a bigger image in order to have a big cursor on a website. Actually, it works well and follows the mouse but as soon as I scroll my page, the cursor stays at the same position as before and update as soon as I move my mouse again.

My idea would be to let the mouse move as soon as you scroll, and not teleport later.

Here is the code so you can understand. thanks for the help!

  $(document).on('mousemove', function(e){
    $('#custom-cursor').css({
      left:  e.pageX -30,
      top:   e.pageY-25,
            pointerEvents: 'none'
    });
  });
#custom-cursor{
    width: 230px;
    height: 300px;
    position: absolute;
    background-size: 230px 300px;
    background-image: url("https://i.imgur.com/6uh0F5h.png");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

<p>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br></p>

cursor css html jquery javascript
2 Answers

Well, you also need to calculate the relative mouse position by the amount of the scroll distance like below :

Edit: I only did it for vertical scrolling you may also need to do the same thing for horizontal scrolling. 

let lastX, lastY, lastScrolled = 0;;
$(document).on('mousemove', function(e) {
  lastX = e.pageX - 30;
  lastY = e.pageY - 25;
  $('#custom-cursor').css({
    left: e.pageX - 30,
    top: e.pageY - 25,
    pointerEvents: 'none'
  });
});

$(window).scroll(function(event) {
  if (lastScrolled != $(window)
    .scrollTop()) {
    lastY -= lastScrolled;
    lastScrolled = $(window)
      .scrollTop();
    lastY += lastScrolled;
  }
  $('#custom-cursor').css({
    left: lastX,
    top: lastY,
    pointerEvents: 'none'
  });
});
#custom-cursor {
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: 230px 300px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

<p>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the
  page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
  the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
  scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
  the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
  scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
  the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
  scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br></p>

user_123549110

Do the same as mousemove but then on document scroll:

$(window).scroll(function(){ 
    $('#custom-cursor').css({
      left:  e.pageX -30,
      top:   e.pageY-25,
      pointerEvents: 'none'
    }); 
});
user_58789610
Related