Glow Effects Animation | Elementor Container Tutorial

Подписаться 199

Просмотров 3,2 тыс.

50% 1

Glow Effects Animation
CODE: www.weblines.n...
For business inquiries email me here:
📨 EMAIL - info@weblines.net
"Transparency Matters! 💡 Please Note: Some of the links in my video's description box may be affiliate links. When you make purchases through these links, I may earn a commission at no additional cost to you. By using my links/codes, you're showing support for my channel and content. Thank you for your continued support!"
#elementortutorial #elementorpagebuilder #elementortipsandtricks #elementorpro

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@IgorLMR Месяц назад

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

@Nisshoku619 2 месяца назад

please fix the website get the code this is amazing

@Weblines_ 2 месяца назад

The link has been updated 😊 Enjoy!

@davilabancaprincipal4346 2 месяца назад

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

@Weblines_ 2 месяца назад

The link has been updated 😊 Enjoy!

@prosperkouassi4693 2 месяца назад

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

@Weblines_ 2 месяца назад

The link has been updated 😊 Enjoy!

@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

@jack2media 4 месяца назад

Good job but doesnt follow my mouse :(

@Weblines_ 2 месяца назад

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`; } }); };