Componente · Aparecer
O efeito mais usado do Smooll: um elemento começa invisível (ou fora do lugar) e se acomoda suavemente na tela assim que a rolagem chega perto dele. Serve para títulos, parágrafos, fotos, botões — qualquer coisa que você queira que "chegue" com a leitura, em vez de simplesmente estar lá desde o início.
Imagine uma pessoa entregando um cartaz: antes de a plateia olhar pra aquele ponto da parede, o cartaz está escondido atrás das costas dela. Quando a plateia chega perto, ela revela o cartaz com um gesto suave. O Reveal faz exatamente isso — só que o "gesto" pode ser um deslize, um giro, um zoom ou uma máscara que se abre.
Na página real do seu site, você não precisa clicar em nada — o Reveal dispara sozinho quando a pessoa rola até o elemento. Aqui na documentação usamos um botão de "repetir" só para você poder ver o efeito quantas vezes quiser, sem precisar rolar a tela.
Todas usam a mesma estrutura de código — só o nome muda. Clique no círculo de qualquer card para repetir a animação dele.
Troque fade-up pelo nome de qualquer variação da lista acima. É a única coisa que muda.
<h2 data-sw="fade-up">Seu título aqui</h2>Nenhum é obrigatório. Sem eles, o Reveal já funciona com um jeito equilibrado por padrão.
data-sw-durQuanto tempo a animação demora, em segundos.Padrão: 0.8 · exemplo: data-sw-dur=".5"data-sw-delayQuanto tempo esperar antes de começar, depois que a rolagem chega no elemento.Padrão: 0 · exemplo: data-sw-delay=".3"data-sw-easeA "personalidade" do movimento: suave, uniforme, com salto no final ou constante.soft · smooth · snap · lineardata-sw-startQual parte da tela precisa ver o elemento para a animação começar.early (cedo) · normal · late (tarde)data-sw-onceSem esse atributo, a animação desfaz quando a pessoa rola pra cima e refaz ao voltar. Com ele, acontece só uma vez e o elemento fica no estado final para sempre.Não recebe valor — só a presença já ativa. Exemplo: data-sw-once<p data-sw="zoom-in" data-sw-dur=".5" data-sw-delay=".2" data-sw-ease="snap" data-sw-once>
Este texto aparece uma vez só e fica.
</p>Se a pessoa visitante usa movimento reduzido, o Reveal entrega o conteúdo já no estado final, sem nenhuma animação — nada fica escondido ou depende do movimento para aparecer.