Componente · Entre páginas
Quando alguém clica num link do seu site, normalmente a tela pisca em branco por um instante enquanto a próxima página carrega. As transições de página escondem essa piscada atrás de um efeito visual — a tela é coberta, a nova página carrega por trás, e o efeito se abre revelando o destino.
É a cortina que fecha entre uma cena e outra no teatro. Clique em qualquer um dos links abaixo para ver o efeito de verdade — cada um leva para uma página de exemplo, com um jeito diferente de cobrir a tela, e um link para voltar.
O atributo entra direto no link, não na página inteira. Só isso já liga o efeito nos dois sentidos: saindo desta página e chegando na próxima.
<a href="outra-pagina.html" data-sw-page="wipe">Ir para outra página</a>É possível usar um efeito para sair desta página e outro, diferente, para entrar na próxima — basta separar os dois nomes com uma barra vertical: data-sw-page="wipe|scale".
fadeA tela escurece e clareia de volta.slide · slide-left · slide-right · slide-up · slide-downUma cortina colorida desliza cobrindo a tela por um dos quatro lados.scale · scale-up · scale-downA cortina cresce a partir de um ponto até cobrir tudo, ou encolhe.flip · flip-xA tela vira como uma página, revelando o destino do outro lado.blur · blur-in · blur-outUm desfoque suave cobre a tela antes de revelar a próxima página.wipeUma faixa colorida varre a tela de baixo para cima.curtainDuas cortinas fecham a partir do centro, como num teatro.A posição da rolagem da página de origem é lembrada e restaurada automaticamente ao usar o botão "voltar" do navegador.