JS Module

Page Transition Y2Transi

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

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

2. Como Funciona

Y2Transi intercepta cliques em links com o atributo y2transi 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 [y2transi]
2 Y2Transi 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 y2transi 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.

y2transi-effect="slide"

up

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

y2transi-effect="up"

down

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

y2transi-effect="down"

fade

Overlay aparece com opacidade. Simples e discreto.

y2transi-effect="fade"

zoom

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

y2transi-effect="zoom"

circle

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

y2transi-effect="circle"

5. Links sem Transição

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

Quick Reference

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