Técnica da Aula 23 Ainda não homologado
Três microefeitos pequenos e úteis: uma contagem regressiva controlada pela rolagem, um brilho que sinaliza um estado ativo, e uma transformação onde um único valor controla rotação e escala ao mesmo tempo.
Ainda não faz parte dos dois arquivos que você instala. Os três precisam da lógica JavaScript mostrada abaixo, copiada para o seu site.
Não existe nenhum relógio ou timer aqui — o número é calculado direto da posição da rolagem. Descer avança a contagem; subir volta.
const progresso = limitar((scrollY - inicio) / distancia, 0, 1);
const numero = 5 - Math.floor(progresso * 6);
saida.textContent = numero > 0 ? numero : "VAI!";Clique para ligar o brilho, ou arraste o controle para ver rotação e escala mudando juntas a partir do mesmo número.
const p = progresso / 100;
objeto.style.transform = `rotate(${p * 360}deg) scale(${.65 + p * .7})`;Use com moderação. Glow serve para destacar um estado ativo específico, não para decorar todos os cartões da página — perde o sentido (e a acessibilidade) se aparecer em tudo.