CODEWITHSUNDEEP
jquerycss
Jack Averill
Jack Averill

Reputation: 841

How can I change my jQuery code to make a div follow my cursor smoothly?

I have some jQuery code that makes a circle shaped span follow my cursor. It works, however I've seen another one on a different website that uses transform: translate() instead of top and left properties when moving the cursor around and it's quite a bit smoother as the cursor moves around.

Can anyone show me how I can edit this code to use transform: translate()?

JSFiddle: https://jsfiddle.net/oj70y5Lm/

CSS, JQuery and HTML

jQuery(document).ready(function() {

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

  $(document).mousemove(function(e){
    mouseX = e.pageX - 20;
    mouseY = e.pageY - 20; 
  });

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

});
body, html {
  position: relative;
  height: 100%; 
  width : 100%;  
  margin: 0;
}

.circle {
    position: absolute;
    background: #000000;
    opacity: .075;
  width: 40px; 
  height: 40px; 
    border-radius: 50%;  
    pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>

Upvotes: 0

Views: 52

Answers (2)

Jack Averill
Jack Averill

Reputation: 841

I've worked out how to do it :)

I've changed this line: $("#circle").css({left: xp +'px', top: yp +'px'});

to:

$("#circle").css('transform', 'translate(' + xp + 'px, ' + yp + 'px)');

JSFiddle: https://jsfiddle.net/oj70y5Lm/1/

CSS, JQuery and HTML

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


body, html {
    position: relative;
    height: 100%; 
    width : 100%;  
    margin: 0;
}

.circle {
    position: absolute;
    background: #000000;
    opacity: .075;
    width: 40px; 
    height: 40px; 
    border-radius: 50%;  
    pointer-events: none;
}

jQuery(document).ready(function() {

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

  $(document).mousemove(function(e){
    mouseX = e.pageX - 20;
    mouseY = e.pageY - 20; 
  });

  setInterval(function(){
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    $("#circle").css('transform', 'translate(' + xp + 'px, ' + yp + 'px)');
  }, 20);

});

Upvotes: 0

Justinas
Justinas

Reputation: 43479

Instead of using JS with 20ms interval try using CSS transition. CSS is always much smoother than timed JS

jQuery(document).ready(function() {

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

  $(document).mousemove(function(e){
    mouseX = e.pageX - 20;
    mouseY = e.pageY - 20;
    
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    $("#circle").css({left: xp +'px', top: yp +'px'});
  });
});
body, html {
  position: relative;
  height: 100%; 
  width : 100%;  
  margin: 0;
}

.circle {
    position: absolute;
    background: #000000;
    opacity: .075;
  width: 40px; 
  height: 40px; 
    border-radius: 50%;  
    pointer-events: none;
    transition: left 20ms ease-in-out, top 20ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>

Upvotes: 1

Related Questions