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

[Anonymous]

Я пытаюсь повторить эффект курсора фона, который вы можете увидеть на этом веб -сайте, используя HTML, CSS, JS. У кого -нибудь есть представление о том, как я могу это сделать? Приглашается любая помощь. Теперь мне нужно реализовать увеличение/искажение фонового изображения в кругах. Таким образом, стороны кругов, кажется, искажают изображение по краям круга, а середина-слегка увеличенная версия фонового изображения. < /P>


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;

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.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();< /code>

Код: Выделить всё

body {
width: 100%;
min-height: 100vh;
position: relative;
background-image: linear-gradient(
#553c9a 0%,
#553c9a 20%,
#b393d3 20%,
#b393d3 40%,
#553c9a 40%,
#553c9a 60%,
#b393d3 60%,
#b393d3 80%,
#553c9a 80%,
#553c9a 100%
);
background-size: cover;
background-attachment: fixed;
}

.circle {
height: 75px;
width: 75px;
border-radius: 75px;
position: fixed;
background-color: black;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/795 ... sor-effect