Circle Mouse Follow is moving when Page is Scrolled

Question

Hey Guys I am trying to create Mouse follow effect, but the thing I am struggle is that when I scroll with the mouse the whole circle is Moving with the page instead of staying with the mouse for some reason. Any clues?

 
 
 jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
   
  jQuery(document).mousemove(function(e){
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30; 
  });
    
  setInterval(function(){
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    jQuery(".circle").css({left: xp +'px', top: yp +'px'});
  }, 20);

});

body, html {
 position: relative;
 height: 100%; 
 width : 100%;  
 margin: 0;
  background-color: #000000;
}


.circle {
  position: absolute;
  border: solid 1px #ccc;
 width: 60px; 
 height: 60px; 
  border-radius: 50%; 
  top:0px;
  left:0px;
}

#site {
height:500vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="circle" class="circle"></span>

<div id="site"></div>

You also need to listen to `$(document).on("scroll"...` and recalculate — freedomn-m, Jan 27 '20 at 18:43
Does this answer your question? [Get mouse position on scroll](https://stackoverflow.com/questions/6519043/get-mouse-position-on-scroll) — freedomn-m, Jan 27 '20 at 18:43

score 0 · Answer 1 · answered Jan 27 '20 at 18:42

You can try with a fixed position, and use clientX/Y instead of pageX/Y

jQuery(document).ready(function() {

 var mouseX = 0, mouseY = 0;
 var xp = 0, yp = 0;

 jQuery(document).mousemove(function(e){
   mouseX = e.clientX - 30;
   mouseY = e.clientY - 30;
 });

 setInterval(function(){
   xp += ((mouseX - xp)/3);
   yp += ((mouseY - yp)/3);
   jQuery(".circle").css({left: xp +'px', top: yp +'px'});
 }, 20);

});

body, html {
 position: relative;
 height: 100%;
 width : 100%;
 margin: 0;
  background-color: #000000;
}


.circle {
  position: fixed;
  border: solid 1px #ccc;
 width: 60px;
 height: 60px;
  border-radius: 50%;
  top:0px;
  left:0px;
}

#site {
height:500vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="circle" class="circle"></span>

<div id="site"></div>

Circle Mouse Follow is moving when Page is Scrolled

1 Answers1