Повторить эффект курсора капли воды ⇐ Html

[Anonymous]

Я пытаюсь повторить эффект курсора фона, который вы можете увидеть на этом веб -сайте, используя 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