Premium — Transições
Misture qualquer efeito de saída com qualquer efeito de entrada — em links
de página (sw-premium-link) e em seções de scroll (sw-premium-section).
Um atributo, pipe no meio, liberdade total. Equivalente ao Lab 09
(demo-transitions.html) do Smooll original.
Quer ver mais? Clica aqui pra uma vitrine com parallax, pin + timeline, vídeo scrub e transições, tudo com o código de cada demo.
Achado ao portar: a demo original também anuncia sm-enter (animar a
página inteira ao carregar, sem clique) — mas essa lógica não existe no router.js
real, só o PJAX disparado por clique em sm-link. Não portei sw-premium-enter
porque ele não existe de verdade no motor original. Os cards abaixo são links reais
pra esta mesma página — clique neles pra ver a transição PJAX funcionando de verdade (fetch +
troca de #sw-premium-view, sem recarregar).
1. sw-premium-link — tipo único (saída = entrada)
Clique em qualquer card — ele navega pra esta mesma página via PJAX real, com a transição indicada.
fade
Opacidade + leve deslize
slide
Sai pela esquerda, entra pela direita
slide-up
Sai pelo topo, nova sobe de baixo
scale
Zoom out na saída, zoom in na entrada
wipe
Cortina cobre e revela
flip
Rotação 3D no eixo Y
blur
Desfoque dissolve e resolve
Como usar isso no seu site, em detalhes:
- Pode colocar em qualquer link do site — menu principal, botão, card, rodapé, não importa onde. Não existe "modo página inteira" vs "modo em partes": é decisão por link, um de cada vez. Um `<a>` com o atributo navega animado; um `<a>` sem o atributo navega do jeito normal (recarrega a página, sem efeito nenhum). Você pode colocar em todos os links do site, só em alguns, ou só num botão específico — não precisa escolher tudo ou nada.
- Exige uma coisa da página de destino: ela precisa ter o mesmo
bloco compartilhado
id="sw-premium-view"ao redor do conteúdo principal (é esse bloco que troca de uma página pra outra — o menu, o cabeçalho e o rodapé continuam parados na tela, só o miolo é substituído, sem piscar branco nem recarregar tudo). Se a página de destino não tiver esse bloco, o link continua funcionando normalmente — só que sem a animação; o motor percebe sozinho que não dá e cai pra navegação comum, sem quebrar nada e sem erro nenhum aparecer. - Nesta documentação, hoje só
premium-transicoes.htmleanimacoes-premium.htmltêm esse bloco — por isso os cards acima navegam "pra si mesmos" (é a forma mais simples de mostrar o efeito funcionando de verdade). No seu site, o normal é colocar esse bloco no layout mestre de todas as páginas que vão se conectar por esse tipo de link.
2. Combinações com pipe — saída ≠ entrada
Clique pra ver o efeito combinado de verdade.
Efeitos disponíveis — sw-premium-link
| Categoria | Valores |
|---|---|
| Saída (out) | fade · slide · slide-left ·
slide-right · slide-up · slide-down ·
scale · scale-up · scale-down ·
flip · flip-x · blur · blur-out ·
wipe · curtain |
| Entrada (in) | fade · slide · slide-left ·
slide-right · slide-up · slide-down ·
scale · scale-up · scale-down ·
flip · flip-x · blur · blur-in ·
wipe · curtain |
3. Site simulado, tela cheia — todos os efeitos em sequência
Uma tela só, fixa, cobrindo a janela inteira — role e ela passa por
2 rodadas de cada um dos 8 efeitos (16 painéis), sempre na mesma ordem: primeiro os
simples (puro translate — slide-up/left/right/down), depois os
compostos (zoom, fold, mask, skew).
Ver cada efeito duas vezes seguidas deixa mais fácil confirmar se ele está consistente. Isso é
sw-premium-section com pipe de 16 valores.
Início — slide-up (1ª)
Role pra ver a próxima página entrar com o mesmo efeito.
Começarsw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Novidades — slide-up (2ª)
Mesmo efeito de novo, pra comparar as duas passagens.
Ver tudosw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Sobre nós — slide-left (1ª)
Entrou deslizando vinda da direita.
Nossa históriasw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Equipe — slide-left (2ª)
Mesmo efeito de novo, pra comparar as duas passagens.
Conhecer o timesw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Planos — slide-right (1ª)
Entrou deslizando vinda da esquerda.
Ver planossw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Contato — slide-right (2ª)
Mesmo efeito de novo, pra comparar as duas passagens.
Falar agorasw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Blog — slide-down (1ª)
Entrou vindo de cima, descendo.
Ler postssw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Comunidade — slide-down (2ª)
Última do grupo simples — a partir daqui só efeitos compostos.
Participarsw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Produtos — zoom (1ª)
Essa página entrou escalando do zero.
Ver catálogosw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Catálogo — zoom (2ª)
Mesmo efeito de novo, pra comparar as duas passagens.
Explorarsw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Equipe técnica — fold (1ª)
Dobrou de cima pra baixo em 3D pra revelar.
Conhecer o timesw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Cases — fold (2ª)
Mesmo efeito de novo, pra comparar as duas passagens.
Ver casessw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Portfólio — mask (1ª)
Revelação em círculo crescendo do centro.
Ver trabalhossw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Depoimentos — mask (2ª)
Mesmo efeito de novo, pra comparar as duas passagens.
Ler maissw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Parceiros — skew (1ª)
Entrou com distorção angular.
Ver parceirossw-premium-section="slide-up|slide-up|slide-left|slide-left|slide-right|slide-right|slide-down|slide-down|zoom|zoom|fold|fold|mask|mask|skew|skew"
Encerramento — skew (2ª), com volume real de conteúdo
Diferente das outras 15, esta página simulada tem bem mais informação do que cabe numa tela só — pra testar como fica na prática. ↕ role com o mouse AQUI DENTRO da caixa
Por que isso importa
Toda a demo até aqui usou um "hero" curto — título, uma frase e um botão — porque isso é o suficiente pra mostrar o efeito de transição em si. Mas um site real quase nunca tem tão pouco conteúdo: uma página de encerramento, um artigo, uma política de privacidade, um catálogo — qualquer uma dessas facilmente passa de uma tela de altura.
O sw-premium-section trava (pina) a seção inteira na tela enquanto
o scroll da página avança entre os painéis. Se o conteúdo de UM painel for maior
que a tela e não tiver limite próprio, a parte de baixo simplesmente nunca
aparece — fica cortada pra sempre, porque o scroll da página está ocupado
controlando a TROCA de painéis, não a leitura de dentro de um painel.
A solução usada nesta caixa
Esta caixa (.fp-body-scroll) tem max-height definida e
overflow-y: auto. Isso cria um scroll contido, só dela — ele
não disputa com o scroll da página nem com o pin da transição. Enquanto a
transição está pinada aqui, você pode rolar o mouse sobre a caixa pra ler tudo,
e quando termina de ler, continua rolando a página normalmente e a transição
segue pro próximo painel (ou solta o pin, se for o último).
Quando usar
- Textos longos: artigos, termos de uso, FAQ dentro de uma seção pinada.
- Listas extensas: catálogo de produtos, changelog, depoimentos.
- Qualquer painel que pode variar de tamanho dependendo do conteúdo real do cliente — melhor prever a caixa de rolagem do que confiar que sempre vai caber.
Quando NÃO precisa
Se o conteúdo do painel é curto por natureza (um hero, um card, uma chamada de
ação), não precisa de overflow-y nenhum — é só isso mesmo, cabe
numa tela e pronto. Só adicione a caixa de rolagem quando o volume real de
conteúdo pedir.
Efeitos de seção disponíveis: slide,
slide-up/down/left/right, zoom, mask, skew,
fold, stack (empilha sem sair), h-scroll/h-scroll-right
(carrossel horizontal).
Painel com volume real de conteúdo — scroll interno contido
O código do painel 16 ("Encerramento") acima, que testa o que acontece quando uma página simulada tem mais conteúdo do que cabe numa tela.
O segredo é max-height + overflow-y: auto
só na parte com volume variável — o resto do painel (cabeçalho, hero) fica fora da caixa de
rolagem, do jeito normal. Isso é CSS puro; não precisa de nenhum atributo
sw-premium-* a mais.