Documentação · Smooll v2
Este é o catálogo de referência do motor de animação do Smooll: 15 técnicas reais, cada uma na sua própria página, com variações ao vivo e o código exato para copiar — escrito para quem nunca programou.
data-sw="fade-up"data-sw="zoom-in"data-sw="rotate-in"Antes de começar
Pense em cada componente como um efeito pronto — tipo um filtro de foto. Você não desenha o efeito do zero: escolhe o nome dele e coloca em um pedaço do seu site. O computador cuida do resto, incluindo o que acontece se o JavaScript falhar.
Três arquivos entram no seu site (uma folha de estilo e dois arquivos de comportamento) e, a partir daí, você liga qualquer animação escrevendo uma única palavra dentro do HTML — o código que estrutura a página. Nenhuma linha de programação é necessária para usar os efeitos prontos.
<link rel="stylesheet" href="smooll2.css">
<script src="gsap-bundle.js" defer></script>
<script src="smooll2.js" defer></script><h2 data-sw="fade-up">Seu título</h2>A palavra data-sw é o único lugar onde a mágica acontece. Ela é lida pelo arquivo de comportamento (o segundo <script> acima), que traduz o nome escolhido em movimento real na tela. Se o nome não existir na lista de efeitos conhecidos, nada quebra — o elemento simplesmente continua visível, do jeito que já estava.
Ninguém fica sem o conteúdo. Se a pessoa visitante tiver o "movimento reduzido" ativado no aparelho dela — uma opção de acessibilidade que existe em todo celular e computador modernos — o Smooll entrega o resultado final direto, sem a animação, automaticamente, em todos os componentes desta página.
Catálogo
Cada linha abre uma página só dela: o que a técnica faz, quando faz sentido usar, as variações com exemplo ao vivo, e o código pronto para copiar. As marcadas Ainda não homologado nasceram nas aulas mais recentes e o efeito já funciona, mas ainda não entraram nos dois arquivos que você instala.
Um elemento surge suavemente quando a rolagem chega até ele — 17 estilos de entrada diferentes.
Aparecer 02CascadeVários itens aparecem um depois do outro, em sequência, não todos de uma vez.
Em grupo 03PinA seção gruda na tela por um trecho da rolagem, enquanto algo dentro dela se move, gira ou muda de tamanho.
Prender 04ParallaxUma camada se move mais devagar ou mais rápido que o resto da página, criando profundidade.
Profundidade 05FixedUma imagem fica parada, grudada, enquanto o texto passa por cima dela ao rolar.
Fundo fixo 06WindowO oposto do Fixed: a imagem fica parada e uma janela se move sobre ela.
Janela móvel 07StoryUma seção presa na tela troca de capítulo conforme a pessoa rola, como slides.
Narrativa 08TrackUma fita de cenas empilhadas desliza dentro de uma janela presa na tela.
Fita vertical 09FramesUma sequência de fotos vira um "vídeo" que avança e volta com a rolagem, quadro a quadro.
Vídeo por scroll 10SectionsTelas cheias que se revezam — empilhadas, deslizando ou lado a lado.
Telas cheias 11Transições de páginaUm efeito de saída e entrada quando a pessoa clica em um link e vai para outra página.
Entre páginas 12SVG e Motion PathUma linha se desenha sozinha, ou um objeto percorre uma curva virando na direção certa.
Não homologado 13InteraçõesCursor customizado, botão magnético e cartão com inclinação 3D que seguem o mouse.
Não homologado 14ExtrasCountdown pela rolagem, brilho de status e transformação por um único valor de progresso.
Não homologado 15Texto44 animações: letra por letra, palavra por palavra, digitando, embaralhando, com brilho.
Não homologado