Transição de página Animações

O que é

Quando a pessoa clica num link do seu site, em vez do corte seco (tela branca, página nova aparecendo aos pedaços), uma cortina animada cobre a tela com um "carregando" (e a sua logo, se quiser). Enquanto isso a próxima página já é baixada. Ao abrir a página nova, a cortina sai com o efeito de entrada. São 17 efeitos: varrer, desbotar, círculo, diagonal, onda, deslizar, girar, desfocar…

Você coloca sw-ani-page nos links internos, com o efeito de saída|entrada (ex.: wipe|fade = cobre varrendo, revela desbotando; um nome só vale para os dois). Ao passar o mouse no link, o SWCore já pede a página para o navegador ir adiantando. Ctrl+clique, "abrir em nova aba" e links de download continuam normais. A página de destino também precisa ter o SWCore com o pacote de animação, para fazer a cortina sair.

Quando usar

• Site institucional, portfólio, landing com várias páginas: a navegação fica com cara de aplicativo.
• Site com a marca forte: a cortina na cor da marca e a logo no meio viram assinatura visual.
• Evite em sistema/painel com muita navegação rápida: a cortina acrescenta cerca de 1 segundo a cada clique.

Comece aqui

1. 1

   Coloque o SWCore e o pacote de animação em todas as páginas (o swcore.motion.min.js vem antes do swcore.min.js).

   <!-- no <head> -->
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.motion.min.css">
   
   <!-- no fim do <body>: o motion ANTES do swcore -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.motion.min.js"></script>
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque sw-ani-page e o efeito no link. Aqui, um botão que só simula (clique para ver a cortina — você não sai desta página):

   Ver a transição

   <a href="/servicos" sw-ani-page="wipe">Serviços</a>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<!-- no fim do <body>, ANTES do swcore.motion.min.js -->
<script>
  document.querySelectorAll('a[href]').forEach(function (link) {
    var href = link.getAttribute('href') || '';
    if (href.startsWith('#') || link.hasAttribute('download') || link.target) return;
    if (new URL(link.href, location.href).origin === location.origin) {
      link.setAttribute('sw-ani-page', link.getAttribute('sw-ani-page') || 'fade|fade');
    }
  });
</script>

<style>
  :root { --sw-page-bg: #0f172a; }   /* cor da cortina */
</style>

<!-- em qualquer lugar do <body> -->
<template id="sw-page-loader">
  <img src="/img/logo.svg" alt="">
</template>

<nav>
  <a href="/" sw-ani-page="curtain|fade">Início</a>
  <a href="/servicos" sw-ani-page="curtain|fade">Serviços</a>
  <a href="/contato" sw-ani-page="curtain|fade">Contato</a>
</nav>

<!-- Já vem pronto: o swcore.motion.min.js cobre a página nova assim que é lido
     e o swcore.motion.min.css esconde o resto enquanto isso. Não precisa escrever nada.

     Página MUITO grande (muito HTML antes dos scripts do fim do <body>)?
     Para garantia total, antecipe só a classe, no <head>: -->
<script>
  try { if (sessionStorage.getItem('sw-page-effect')) document.documentElement.classList.add('sw-page-pending'); } catch (e) {}
</script>
<!-- ATENÇÃO: esse script do <head> só em páginas que carregam o swcore.motion.min.js
     — é ele que tira a classe (sem ele a página ficaria invisível). -->

<button type="button" sw-btn="suc" id="salvar">Salvar</button>

<script>
  document.getElementById('salvar').addEventListener('click', async () => {
    await SWMotion.transition('circle|fade');   // cobre e sai
    // aqui a cortina já saiu
  });
</script>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js e swcore.motion.min.css em todas as páginas (a de origem cobre, a de destino revela).
• Links para páginas do mesmo site.

Cuidados — erros comuns

• Link para outro site (Instagram, WhatsApp, outro domínio) com sw-ani-page abre normal, sem cortina: a transição só existe entre páginas do mesmo site.
• A página de destino sem o pacote de animação fica "presa" atrás de nada: a cortina some junto com a página antiga e a nova aparece seca. Coloque o SWCore em todas.
• <button> com sw-ani-page nunca navega, só simula. Para trocar de página use <a href>.
• Link com target="_blank" ou download ignora a transição (e isso é o certo).
• Nome de efeito errado não dá erro: vira wipe.

O que ele não faz

• Acrescenta perto de 1 segundo por navegação (cobrir + carregar + sair).
• Não funciona com o botão "voltar" do navegador: a página anterior aparece sem cortina.
• O texto "Carregando" é fixo, em português.