I am trying to replicate the background magnification cursor effect you can see on this website using html, css, js. Does anyone have an idea of how I can do this? Any help would be welcome.
I have managed to replicate the motion of the circles which when I play a lot around with the reference website seems to be very similar to the one I've built here. Now I need to implement the magnification/distortion of the background image within the circles.
The effect I am trying to achieve is a bit like putting water drops on an image. So the sides of the circles seem to distort the image around the edges of the circle and the middle is a slightly magnified version of the background image.
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();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;
}<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="dropplet.css">
</head>
<body>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script src="dropplet.js"></script>
</body>