O que é

Efeitos feitos para texto: títulos, chamadas, frases de destaque. Você escreve o texto normal no HTML e diz qual efeito quer em sw-ani. O SW Core separa o texto em pedaços (letras, palavras ou linhas) e anima cada um, ou digita, ou embaralha, ou acende palavra por palavra. Alguns efeitos são só CSS (degradê nas letras, sublinhado, onda, falha, cortina).

Os efeitos de texto que "mexem" nas letras (split, type, scramble, sweep, marquee, whole) precisam do pacote de animação. O "quando" usa palavras curtas: sem palavra anima toda vez que o texto aparece na tela; one anima só a primeira vez; loop repete enquanto estiver na tela; scrub amarra o efeito à rolagem. O texto continua inteiro para o Google e para leitores de tela.

Quando usar

• Título principal de uma seção: sw-ani="split words" (palavra por palavra) — elegante sem exagero.
• Chamada com "digitando": sw-ani="type".
• Clima de tecnologia (números, código): sw-ani="scramble".
• Frase de manifesto que acende enquanto a pessoa lê: sw-ani="sweep".
• Faixa de marcas, serviços ou avisos correndo: sw-ani="marquee".
• Várias frases que se revezam ("Feito pra criar / animar / vender") é outro componente: a Máquina de escrever.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação. O JS da animação vai 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>

2. 2

   Escreva o efeito no texto. Aqui: cada palavra entra em sequência quando o título aparece na tela.

   Bolos caseiros feitos todo dia

   <h2 sw-ani="split words">Bolos caseiros feitos todo dia</h2>

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="split words blur-up one">Doces que viram lembrança</h1>
  <p sw-ani="fade-up one delay-5">Encomendas para aniversários, casamentos e empresas.</p>
  <a href="/encomenda" sw-btn="pri pill">Fazer encomenda</a>
</section>

<div sw-ani="marquee" class="bg-g-pri p-m">
  <span>★ Entrega rápida ★ Pagamento no Pix ★ Atendimento humano ★ Garantia de 1 ano&nbsp;</span>
</div>

<style>
  .manifesto { --sw-sweep-key: var(--sw-pri); }
</style>
<p sw-ani="sweep" sw-ani-keywords="gente de verdade|sem enrolação" class="manifesto">
  Somos gente de verdade atendendo gente de verdade, sem enrolação e sem letra miúda.
</p>

<p class="t-g"><span sw-ani="scramble loop" sw-ani-chars="01">SERVIDOR ONLINE</span> · <span sw-ani="type loop">verificando pagamentos…</span></p>

API (JavaScript)

Precisa de quê

• swcore.motion.min.css + swcore.motion.min.js (antes do swcore.min.js) — para split, type, scramble, sweep, marquee e whole.
• Só o swcore.min.css — para gradient loop text, underline hover, sw-text-wave e sw-glitch. O sw-curtain também precisa do swcore.min.js (é ele que percebe quando o texto aparece).

Cuidados — erros comuns

• split, type e scramble trocam o conteúdo do elemento: negrito, links e ícones lá dentro viram texto simples. Coloque o efeito num elemento só com texto.
• No type, o cursor e as letras aparecem no lugar: dê ao elemento uma altura/linha fixa se ele fica no meio de outros blocos, para a página não "pular".
• No marquee, só o primeiro elemento de dentro é repetido. Texto solto sem <span> não funciona.
• Texto muito longo com split letra a letra fica lento e cansativo: use words ou lines em parágrafos.

O que ele não faz

• Quem ativou "reduzir movimento" no aparelho vê o texto pronto, sem animação.
• O sw-text-wave precisa de uma letra por <span> escrita à mão.