🚀 Capítulo 16: Efeitos Visuais
🎯 Objetivo da Aula
Ao final desta aula, você saberá como criar efeitos visuais simples (como acender um sabre de luz) combinando classes CSS e JavaScript.
🏢 O Cenário Prático (Seu Desafio)
O sabre de luz precisa acender quando você clica nele! Seu desafio é usar o JavaScript para alternar uma classe CSS que mude o tamanho e o brilho do sabre!
🧠 Fundamentos: A Teoria Traduzida
A melhor forma de fazer animações e efeitos visuais não é mudando as propriedades no JavaScript (como style.height), mas sim usando transições do CSS (transition) e apenas ligando/desligando uma classe com o JavaScript (classList.toggle).
📖 Exemplo Guiado: Acendendo o Sabre
No CSS:
.sabre {
width: 10px;
height: 0px;
background-color: #00ff00;
transition: height 0.5s ease; /* Efeito suave */
box-shadow: 0 0 10px #00ff00;
}
.sabre.aceso {
height: 200px;
}No JS:
const botao = document.querySelector('#ligar');
const sabre = document.querySelector('.sabre');
botao.addEventListener('click', () => {
sabre.classList.toggle('aceso');
});🛠️ Prática Obrigatória 1
Crie um botão e uma div. Faça a div desaparecer suavemente (mudando a opacidade de 1 para 0) quando o botão for clicado.
🛠️ Prática Obrigatória 2
Mude a cor do sabre de luz para vermelho adicionando uma classe .sabre-sith.
🔑 Gabarito de Código/Fórmulas
Prática 1:
No CSS:
.caixa {
opacity: 1;
transition: opacity 0.5s;
}
.caixa.escondida {
opacity: 0;
}No JS:
div.classList.toggle('escondida');