LAB 09 — Page Transitions

Transições de Página

O router PJAX do Smooll intercepta cliques em a[sm-link] e anima a saída/entrada sem recarregar a página. Sete tipos disponíveis — basta trocar o valor.

🌫️

fade

Opacidade + leve deslize vertical. Suave e universal.

sm-link="fade"

⬅️

slide

Página sai pela esquerda, nova entra pela direita.

sm-link="slide"

➡️

slide-right

Página sai pela direita, nova entra pela esquerda.

sm-link="slide-right"

⬆️

slide-up

Página sai pelo topo, nova sobe de baixo.

sm-link="slide-up"

🔭

scale

Zoom out na saída, zoom in na entrada. Profundidade visual.

sm-link="scale"

🎬

wipe

Cortina cobre a página e abre revelando a nova. Cinematográfico.

sm-link="wipe"

🃏

flip

Rotação 3D no eixo Y — efeito de virar uma carta.

sm-link="flip"

⚠️ Em file:// o browser bloqueia fetch — os links fazem navegação normal sem PJAX. Sobe num servidor local (npx serve . ou Live Server) para ver as transições.

Section Transitions

Transições de seção controladas por scroll — declarativas com um único atributo no wrapper.

sm-section="stack" sm-section="slide-left" sm-section="mask" sm-section="zoom" sm-section="skew" sm-section="fold"

stack

Seções empilhadas com sticky. Cada nova seção sobe por cima da anterior enquanto o usuário rola.

<div sm-section="stack">
  <div>Seção 1</div>
  <div>Seção 2</div>
  <div>Seção 3</div>
</div>

Seção 01

Role para ver a próxima subir

Seção 02

Veio por cima da primeira

Seção 03

A última cobre tudo

slide / slide-up

Próxima seção entra de baixo para cima.

<div sm-section="slide-up">
  <div>Seção 1</div>
  <div>Seção 2</div>
</div>

slide-up · 1

Role ↓

slide-up · 2

Subiu de baixo

slide-down

Próxima seção entra de cima para baixo.

<div sm-section="slide-down">
  <div>Seção 1</div>
  <div>Seção 2</div>
</div>

slide-down · 1

Role ↓

slide-down · 2

Desceu do topo

slide-left

Próxima seção entra pela direita (empurra para esquerda).

<div sm-section="slide-left">
  <div>Seção 1</div>
  <div>Seção 2</div>
</div>

slide-left · 1

Role ↓

slide-left · 2

Veio da direita

slide-right

Próxima seção entra pela esquerda (empurra para direita).

<div sm-section="slide-right">
  <div>Seção 1</div>
  <div>Seção 2</div>
</div>

slide-right · 1

Role ↓

slide-right · 2

Veio da esquerda

h-scroll — scroll horizontal

Seções lado a lado — o track inteiro desliza para a esquerda conforme você rola. N filhos, qualquer quantidade.

<div sm-section="h-scroll">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Cena 01

Role ↓ para avançar

Cena 02

Deslizou da direita

Cena 03

Continua...

Cena 04

Última cena

h-scroll-right — scroll horizontal reverso

Começa na última seção e desliza para a direita conforme você rola.

<div sm-section="h-scroll-right">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Cena 01

Primeira (aparece por último)

Cena 02

Deslizando →

Cena 03

Continua →

Cena 04

Começa aqui

mask

A segunda seção revela-se em círculo crescente a partir do centro — efeito iris.

<div sm-section="mask">
  <div>Fundo</div>
  <div>Revelação</div>
</div>

Mask — Base

A próxima aparece em círculo

Mask — Reveal

clipPath circle expandido

zoom

A segunda seção surge do nada com scale 0 → 1 + fade de opacidade.

<div sm-section="zoom">
  <div>Base</div>
  <div>Zoom in</div>
</div>

Zoom — Base

A próxima escala do zero

Zoom — In

scale(0) → scale(1)

skew

A segunda seção entra pela direita com skewX — efeito perspectiva angular.

<div sm-section="skew">
  <div>Base</div>
  <div>Skew in</div>
</div>

Skew — Base

Role para ver o ângulo

Skew — In

xPercent + skewX → 0

fold

A segunda seção "dobra" para baixo a partir do topo — rotationX 3D.

<div sm-section="fold">
  <div>Base</div>
  <div>Fold in</div>
</div>

Fold — Base

A próxima dobra do topo

Fold — In

rotationX(-90) → 0