Efeito de luz no BG onde estiver o mouse
AnimaçõesAdicione o código abaixo no conteúdo de um widget HTML no rodapé da página
Adicione o código abaixo no CSS personalizado da seção que irá receber o efeito
Victor
2 visualizações
0 curtidas
12/10/2025
1 versões
Código
<script>
const cardsContainer = document.querySelector("#bgluz");
const cardsContents = document.querySelectorAll(".meio");
let isLargeScreen = window.matchMedia("(min-width: 1025px)").matches;
if (isLargeScreen) {
let lastX = 0;
let lastY = 0;
cardsContainer.addEventListener("mousemove", (e) => {
lastX = e.clientX;
lastY = e.clientY;
requestAnimationFrame(() => {
cardsContents.forEach((card) => {
const rect = card.getBoundingClientRect();
const x = lastX - rect.left;
const y = lastY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
});
});
});
}
</script>Código Bloqueado
Faça login ou cadastre-se para visualizar o código completo deste snippet
Preview Visual
