Técnicas das Aulas 19 e 20 Ainda não homologado
44 jeitos diferentes de fazer um título ou parágrafo aparecer: letra por letra, palavra por palavra, linha por linha, digitando como máquina de escrever, embaralhando como um efeito de decodificação, ou com brilhos e máscaras. Clique no ▶ de qualquer card para repetir.
Ainda não faz parte dos dois arquivos que você instala. Nas aulas, essas técnicas ficam ligadas ao scroll de verdade (role e o texto se constrói); aqui, pra caber 44 exemplos numa tela só, cada card toca sozinho ao clicar em ▶ — o efeito visual é idêntico, só o gatilho muda.
Divide o texto em letras, palavras ou linhas, e cada pedaço entra com seu próprio atraso, criando uma sensação de construção.
Texto que se decodifica como um código sendo quebrado, que é digitado letra por letra, ou que ganha brilho, contorno e outros acabamentos especiais.
Um exemplo de cada família — troque o texto e o nome da variação pelos seus.
<p data-text="split" data-mode="chars" data-effect="fade-up">SMOOLL</p><p data-text="scramble" data-variant="default">SMOOLL ENGINE</p><p data-text="type" data-variant="default">Olá, Mundo.</p>Nas aulas, o progresso vem do scroll real; para reproduzir isso no seu site, a lógica de cálculo de progresso das páginas text-split.html e text-effects.html do curso precisa ser copiada junto.