Hice un círculo que sigue al cursor usando jquery, que funciona bien, pero quiero darle un efecto más suave, he intentado usar el tiempo de espera, pero eso no funciona, lo cual es un poco obvio, ¿hay alguna otra forma de lograr esto?
Además, cada vez que el cursor está cerca del borde de la página web o lo cruza, el círculo también sale de la página web creando una barra de desplazamiento. ¿Se puede evitar esto de alguna manera?
Mi código -
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); });Sí, puedes evitarlo, detectando si estaría fuera del borde y haciendo las correcciones:
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); });