I have a spotlight to have on the background of my website. It essentially shows through a dark grey layer to show a gradient on the background layer. I really want the circle to be morphing as I’m moving the mouse around, but right now it’s deviating off the center of where the mouse is. I was hoping for the blob to stay centered on the mouse like it is in this example. When I run my code, the rotating looks fine at first, but once I continue to move my mouse, the blob moves away from my mouse and rotates even off the screen before returning to my mouse. But in the example, the blob stays on track with the mouse movement and if there is no movement the blob stays stationary despite continuing to rotate. I’m wondering if it’s because the background layer is a rectangle and how I can fix it? Thank you!
Here is my code!
document.addEventListener("DOMContentLoaded", () => {
const blob = document.getElementById("blob");
window.onpointermove = event => {
const {
clientX,
clientY
} = event;
blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, {
duration: 2500,
fill: "forwards"
});
};
});body {
background-color: #222020;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}
#gradient-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
}
#blob {
width: 1px;
height: 1px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: visible;
background-color: white;
mix-blend-mode: multiply;
}
#blob::before {
content: "";
display: block;
width: 200vw;
height: 200vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000;
}
#blob::after {
content: "";
display: block;
width: 34vmax;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
animation: rotate 20s infinite;
-webkit-animation: rotate 20s infinite;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
@-webkit-keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}
@keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}
#blur {
height: 100%;
width: 100%;
position: fixed;
backdrop-filter: blur(12vmax);
}<div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>