I have made a circle that follows the cursor using jquery which works fine but i want to give it a smoother effect, i have tried using timeout but that wont work which is kinda obvious so is there any other way to achieve this ?
Also whenever the cursor is close to the border of the webpage or crosses it the circle also goes outside the webpage creating a scrollbar can this be avoided by any way ?
My code -
var mouseX = 0, mouseY = 0;
var xp = 0, yp = 0;
let mouseMovementStoppedTimer;
const mouseMovementStopped = function() {
$("#circlecc").css({ opacity: 0});
}
$(document).mousemove(function(e){
$("#circlecc").css({opacity: 1})
mouseX = e.clientX - 12;
mouseY = e.clientY - 12;
setTimeout(() => {
$("#circlecc").css({left: mouseX +'px', top: mouseY +'px'});
}, 50)
clearTimeout(mouseMovementStoppedTimer);
mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 120);
});
Yes, you can avoid it, by detecting whether it would be outside the edge and making corrections:
let radius = 5; //you can have your own value here
function getX(x) {
if (x - radius < 0) return radius;
if (x + radius >= $(window).width()) return $(window).width() - radius - 1;
return x;
}
function getY(y) {
if (y - radius < 0) return radius;
if (y + radius >= $(window).height()) return $(window).height() - radius - 1;
return y;
}
$(document).mousemove(function(e){
$("#circlecc").css({opacity: 1})
mouseX = e.clientX - 12;
mouseY = e.clientY - 12;
setTimeout(() => {
$("#circlecc").css({left: getX(mouseX) +'px', top: getY(mousey) +'px'});
}, 50)
clearTimeout(mouseMovementStoppedTimer);
mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 120);
});