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.
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ª)
Última página — mesmo efeito de novo. Fim do site.
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"
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).