Glow Effects Animation | Elementor Container Tutorial

[@teuccio73]

Good job !

[@Victor_FK]

Awesome!! 😀

[@Weblines_]

Thanks

[@badboymanry]

bro dont stop posting your gonna be big trust me

[@Weblines_]

Thank you! Your support means a lot!

[@boringhimanshujangra]

i m really impressed bro

[@fransouza4108]

I love it 😍💖

[@LuizAlbertoSoares]

Nice!

[@cesarandrade9021]

Nice!

[@Weblines_]

Thanks 😊

[@lennioliveira6840]

The website of the code is out

[@IgorLMR]

It doesnt follow my mouse in the background, it just moves alone, how can i fix it?

[@FlamvellFiredog]

Hey i added your Code on my Homepage but for some reason the BG of the Button don‘t work for me, when i hover over it its just Blue

[@miekevanderwerf6430]

can this effect also be created with a light background?

[@roppor2194]

Hey Bro… how you create text “your logo” ?

[@Weblines_]

Simply add a colored circle inside your text, and you will achieve the same effect!

[@davilabancaprincipal4346]

Hey bro, fix the link. It seems like it stopped working and then I couldn't get the code.

[@Weblines_]

The link has been updated 😊 Enjoy!

[@prosperkouassi4693]

your website is down. we can't access to code

[@Weblines_]

The link has been updated 😊 Enjoy!

[@Hughz-o6l]

bro please fix website

[@Weblines_]

I am currently working on fixing it.. It will be ready in a few days

[@Hughz-o6l]

@@Weblines_ i need it too please

[@marlinx78]

the code please

[@jack2media]

Good job but doesnt follow my mouse :(

[@Weblines_]

Did you add the CSS ID correctly?

[@mikeisfreeX]

wrap your script with "onLoad" function and it will work. Like this:
window.onload = function() {
const container = document.querySelector(".hero-bg");
const blob = container.querySelector(".oval-blur-img");
const button = document.querySelector(".button");
let isMouseOverButton = false;
container.addEventListener("mouseenter", () => {
isMouseOverButton = false;
});
button.addEventListener("mouseenter", () => {
isMouseOverButton = true;
blob.style.opacity = "0";
});
button.addEventListener("mouseleave", () => {
isMouseOverButton = false;
blob.style.opacity = "1";
});
container.addEventListener("mouseleave", (e) => {
if (!isMouseOverButton) {
blob.style.opacity = "1";
blob.style.transition = "left 0.5s ease, top 0.5s ease";
blob.style.left = "50%";
blob.style.top = "50%";
setTimeout(() => {
blob.style.transition = "";
}, 500);
}
});
container.addEventListener("mousemove", (e) => {
if (!isMouseOverButton) {
const { clientX, clientY } = e;
const offsetX = clientX - container.getBoundingClientRect().left;
const offsetY = clientY - container.getBoundingClientRect().top;
blob.style.left = `${offsetX}px`;
blob.style.top = `${offsetY}px`;
}
});
};

[@Nisshoku619]

please fix the website get the code this is amazing

[@Weblines_]

The link has been updated 😊 Enjoy!

[@johnpatrickwoolbright4232]

😬 *promosm*

[@Weblines_]

Hi👋