Я пытаюсь повторить эффект курсора фона, который вы можете увидеть на этом веб -сайте, используя HTML, CSS, JS. У кого -нибудь есть представление о том, как я могу это сделать? Приглашается любая помощь.
< /code>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});
window.addEventListener("mousemove", function(e){
coords.x = e.clientX;
coords.y = e.clientY;
});
function animateCircles() {
let x = coords.x;
let y = coords.y;
let speed = 0.8;
// var bw = 3;
// var w = glass.offsetWidth / 2;
// var h = glass.offsetHeight / 2;
circles.forEach(function (circle, index) {
circle.style.left = x - 20 + "px";
circle.style.top = y - 20 + "px";
circle.x = x;
circle.y = y;
// circle.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
// circle.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
circle.style.scale = ((1.5 - 1) * (index - 1) / (20 - 1)) + 1;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * speed;
y += (nextCircle.y - y) * speed;
});
requestAnimationFrame(animateCircles);
}
animateCircles();
Подробнее здесь: https://stackoverflow.com/questions/795 ... sor-effect
