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>
Hello Nathan!
I just found your post while looking for similar solutions myself. Thank you for sharing your code. It was helpful for me to understand a few things. Did you solve your issue?
unfortunately i am not skilled enough to help you but i was wondering if you could help me with my issue.
but i would like to have a ‘screen’ effect using ``` (mix-blend-mode: screen;) on the circle hand have the circle itself being a gradiend with the idea of resulting in this effect i prototyped in figma: ‘Yasha Wallin’ from ‘Yasha Wallin’ by Dario Buzzini
Hi, I have the same problem but I can’t figure out how to solve it. I’m trying to make a custom cursor that follows the cursor and when it hovers over the buttons it increases its size. The problem is as if the cursor originates from the top left vertex and the more I move it to the right or down, the further it moves away. I saw your answers and your advice but I really can’t solve it, please help me I’m going crazy trying to figure out how to solve it!!!