Hi! i’m trying to create a circle that follows the cursor maintaining a consistent distance. The issue that i’m having is that the circle gets further when i move the cursor close to the page borders and closer when i move the cursor close to the center.
This is the code i’m using on a custom code widget.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--gradient-color-1: #fff;
--gradient-color-2: #222330;
--gradient-color-3: #F2AF47;
--gradient-color-4: #d68b1b;
}
.follower {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
transition: transform 0.3s ease-in-out;
backdrop-filter: invert(100%);
-webkit-backdrop-filter: invert(100%);
}
.follower.delayed {
transition-delay: 50s;
}
</style>
<title>Interactive Gradient Background</title>
</head>
<div class="follower"></div>
<script>
const follower = document.querySelector('.follower');
const delayedClass = 'delayed';
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
// Apply a slight delay to the follower's animation
follower.classList.add(delayedClass);
// Calculate an offset to make the circle closer to the cursor
const offsetX = -450; // Adjust this value to control the offset
const offsetY = -200; // Adjust this value to control the offset
// Update the follower's position with the offset
follower.style.left = mouseX + offsetX + 'px';
follower.style.top = mouseY + offsetY + 'px';
});
document.addEventListener('mouseenter', () => {
// Show the follower when the mouse enters the page
follower.style.opacity = '1';
});
document.addEventListener('mouseleave', () => {
// Hide the follower when the mouse leaves the page
follower.style.opacity = '0';
});
</script>
p.s. I took as inso this website : https://illuminating-radioactivity.com/
Thank you !!
