Efeitos de entrada Animações

O que é

São as animações de "entrar em cena" e de "chamar atenção" do site: o título que sobe aparecendo, os cartões que surgem quando você rola até eles, o botão do WhatsApp que pulsa, o cartão que sobe quando o mouse passa. Você escreve sw-ani no elemento e, dentro, palavras: o nome do efeito e, se quiser, quando ele acontece, a velocidade e um atraso. A ordem das palavras não importa.

Sem palavra de "quando", o efeito roda uma vez assim que a página abre. one espera o elemento aparecer na tela (uma vez só); mount refaz toda vez que ele entra na tela; loop repete sem parar; hover anima quando o mouse passa por cima; scrub amarra a animação à barra de rolagem (anda para frente e para trás junto com você). Todos estes vêm no arquivo principal do SW Core — só o scrub e o sw-ani-distance precisam do pacote de animação.

Quando usar

• Títulos e blocos que entram quando a pessoa rola: sw-ani="fade-up one".
• Chamar atenção para uma ação (botão de WhatsApp, "Promoção"): sw-ani="pulse loop" ou "hbeat loop" — com moderação.
• Cartões e botões que reagem ao mouse: sw-ani="lift hover".
• Vários itens entrando um depois do outro: mesmo efeito com delay-1, delay-2… (ou o Cascade, que faz isso sozinho).
• Efeito que acompanha o dedo/rolagem (monta e desmonta enquanto rola): sw-ani="zoom-in scrub".

Comece aqui

1. 1

   Coloque o SW Core na página. Para one, mount, loop, hover e "ao abrir", o arquivo principal basta:

   <link rel="stylesheet" href="swcore/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Escreva sw-ani com o efeito e o "quando". Aqui: sobe aparecendo, uma vez, quando chega na tela.

   Bem-vindo à Padaria Pão Quente

   <h2 sw-ani="fade-up one">Bem-vindo à Padaria Pão Quente</h2>

3. 3

   Só vai usar scrub (preso à rolagem) ou sw-ani-distance? Aí inclua também o pacote de animação — o JS dele antes do swcore.min.js:

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

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.

<section class="t-ct">
  <h1 sw-ani="fade-up">Seu site pronto em 7 dias</h1>
  <p sw-ani="fade-up delay-2">Design sob medida, rápido no celular e fácil de achar no Google.</p>
  <a href="/contato" sw-btn="pri pill g" sw-ani="zoom-in delay-4">Quero meu site</a>
</section>

<a href="https://wa.me/5511999999999" sw-btn="suc pill" sw-ani="hbeat loop">
  <i class="swil-whatsapp"></i> Falar no WhatsApp
</a>

<div class="l l-3 gap-4">
  <div sw-ani="lift hover" class="bg-sur bd p-g r-m"><i class="swi-rocket t-pri"></i><h3>Sites</h3><p class="t-p op-8">Rápidos e bonitos.</p></div>
  <div sw-ani="lift hover" class="bg-sur bd p-g r-m"><i class="swi-store t-pri"></i><h3>Lojas</h3><p class="t-p op-8">Venda pela internet.</p></div>
  <div sw-ani="lift hover" class="bg-sur bd p-g r-m"><i class="swi-calendar t-pri"></i><h3>Agendamento</h3><p class="t-p op-8">Sem ligação.</p></div>
</div>

<div class="l l-2 gap-4">
  <div sw-ani="fade-right one" class="bg-sur bd p-g r-m"><h3>Quem somos</h3><p class="t-p op-8">Há 12 anos fazendo pão artesanal no bairro.</p></div>
  <div sw-ani="fade-left one delay-2" class="bg-sur bd p-g r-m"><h3>Onde estamos</h3><p class="t-p op-8">Rua das Flores, 120 — aberto todos os dias.</p></div>
</div>

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js — todos os gatilhos, menos o scrub.
• swcore.motion.min.css + swcore.motion.min.js (antes do swcore.min.js) — só para scrub e sw-ani-distance.

Cuidados — erros comuns

• Um efeito por elemento: sw-ani="fade-up zoom-in" não soma os dois (vale um só). Para combinar, coloque um efeito no pai e outro no filho.
• Sem one o efeito roda quando a página abre — num bloco lá embaixo, ninguém vê. Para o que está fora da primeira tela, use one ou mount.
• Elemento com one/mount começa invisível até aparecer na tela. Se o JavaScript não carregar, ele fica invisível — não esconda texto essencial atrás disso.
• Efeitos que movem o elemento (float, wave, pulse…) não funcionam num <span> ou <a> solto no meio do texto: dê a ele uma classe que o torne bloco (ex.: blk) ou use num botão/div.
• glow daqui é sempre com loop ou hover. Escrito sozinho (sw-ani="glow"), com o pacote de animação carregado, ele é o componente Glow (brilho que segue o mouse e sombra no texto) — um não liga o outro.
• Loop demais cansa e distrai: um ou dois por tela, no que realmente precisa de atenção.

O que ele não faz

• Quem ativou "reduzir movimento" no aparelho vê tudo parado (já no lugar). Isso é de propósito, para acessibilidade.
• Os nomes antigos reveal-left/right/up/center não rodam "ao abrir" — só com one, mount ou scrub.