JS Module

Transições Nativas

Transições animadas entre páginas - slide, fade, zoom - com overlay que suaviza a navegação.

1. Demo - Clique num link abaixo

Cada botão navega para outra página com um efeito diferente:

Slide Up Down Fade Zoom Circle SVG Wave / Curtain SVG Draw

O overlay cobre a tela ao sair e desaparece ao entrar na nova página.

2. Como Funciona

SWTransi intercepta cliques em links com o atributo sw-trans e aplica uma animação de saída antes de navegar. Ao carregar a nova página, uma animação de entrada complementa a transição. O overlay é criado automaticamente pelo JS.

1 Usuário clica em um link [sw-trans]
2 SWTransi salva o efeito no sessionStorage
3 Overlay de entrada é animado (ex: slide de baixo para cima)
4 Após a animação, o navegador vai para a nova URL
5 Na nova página, o overlay sai com animação reversa

3. Uso Básico

Adicione sw-trans em qualquer link interno. O overlay é criado automaticamente - não é necessário nenhum elemento HTML extra.

4. Efeitos Disponíveis

slide

Overlay desliza da esquerda para a direita. Efeito padrão.

sw-trans-effect="slide"

up

Overlay sobe de baixo para cima. Sensação de avanço.

sw-trans-effect="up"

down

Overlay desce de cima para baixo. Sensação de retorno.

sw-trans-effect="down"

fade

Overlay aparece com opacidade. Simples e discreto.

sw-trans-effect="fade"

zoom

Overlay expande do centro da tela. Impactante para landing pages.

sw-trans-effect="zoom"

circle

Revelar circular do centro com clip-path. Criativo e fluido.

sw-trans-effect="circle"

curtain / wave

Onda líquida em curva Bezier SVG que varre a tela com efeito fluido de cortina.

sw-trans-effect="curtain"

draw

Traço SVG ondulado se desenha na tela e engrossa até virar um bloco sólido; a nova página desfaz o traço ao contrário. Mesma técnica do DrawSVG do GSAP, sem GSAP.

sw-trans-effect="draw"

5. Links sem Transição

Links externos (target="_blank"), âncoras (href="#") e links sem sw-trans são ignorados automaticamente.

Quick Reference

Atributo Elemento Descrição
sw-trans a Ativa a transição no link
sw-trans-effect a Efeito: slide (padrão) - up - down - fade - zoom - circle - curtain - draw
sw-trans-dur a Duração da animação em ms (padrão: 400)
sw-trans-color a Cor do overlay (padrão: var(--sw-pri))