Máquina de escrever JavaScript

O que é

Serve para dar vida ao título principal de uma página: uma parte fixa ("Fazemos sites") e uma parte que vai trocando ("rápidos", "bonitos", "que vendem"). Você coloca sw-typewriter num <span> e passa a lista de frases em sw-typewriter-words. Ele digita a primeira, espera, apaga, digita a próxima — e recomeça. Velocidade, pausa, cursor e se ele para no fim são ajustáveis.

Precisa do JavaScript do SW Core. Ao ligar, ele apaga o que estava escrito dentro do elemento e começa a digitar. O cursor é um caractere (padrão |) que pisca via CSS. A lista pode ser escrita como JSON ('["a","b"]') ou simplesmente separada por vírgulas ("a,b").

Quando usar

• Título do topo de uma landing page, com a parte que muda destacada.
• Apresentação curta ("Olá, eu sou a Ana — designer") que digita uma vez e para: sw-typewriter-loop="false".
• Evite em texto longo ou importante para leitura: a pessoa tem que esperar para ler.

Comece aqui

1. 1

   Coloque o SW Core na página.

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

2. 2

   Um <span> com a lista de frases. Deixe a primeira escrita dentro: é o que aparece se o JavaScript não carregar (e o que o Google lê).

   Fazemos sites rápidos.

   <h1>Fazemos sites
     <span sw-typewriter sw-typewriter-words='["rápidos.","bonitos.","que vendem."]'>rápidos.</span>
   </h1>

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.

<h1 aria-label="Seu negócio merece um site rápido, bonito e que vende.">
  Seu negócio merece um site
  <span class="t-pri" sw-typewriter sw-typewriter-words='["rápido.","bonito.","que vende."]'>rápido.</span>
</h1>
<a href="/contato" sw-btn="pri pill g">Quero meu site</a>

<p class="t-gg"><span sw-typewriter sw-typewriter-loop="false" sw-typewriter-speed="70" sw-typewriter-words='["Olá!","Eu sou a Ana.","Faço identidade visual para pequenos negócios."]'>Olá!</span></p>

<div class="bg-3 r-m p-3"><code class="t-g"><span sw-typewriter sw-typewriter-cur="▌" sw-typewriter-speed="60" sw-typewriter-words='["npm install swcore","carregando…","pronto!"]'>npm install swcore</span></code></div>

API (JavaScript)

Precisa de quê

• swcore.min.css (o cursor piscando) e swcore.min.js (a digitação).

Cuidados — erros comuns

• Texto com vírgula dentro do elemento e sem sw-typewriter-words: "Pão, café e bolo" vira duas frases ("Pão" e "café e bolo"). Passe a lista em JSON.
• JSON com aspas duplas por fora (sw-typewriter-words="["a","b"]"): quebra o HTML. Use aspas simples por fora: '["a","b"]'.
• Deixar o elemento vazio: se o JavaScript falhar, o título fica sem a palavra, e o Google não lê nada ali. Escreva a primeira frase dentro.
• Leitor de tela lê a frase pela metade enquanto ela é digitada. Coloque a frase completa num aria-label do título (veja a primeira receita).
• Colocar sw-typewriter no título inteiro: a parte fixa também é apagada e redigitada. Deixe o efeito só num <span> com a parte que muda.

O que ele não faz

• Não respeita a preferência "reduzir movimento" do sistema: o texto se move para todos.
• Só texto puro: negrito, links ou ícones dentro das frases não são mantidos.
• Não tem eventos nem funções para pausar ou trocar as frases pelo JavaScript.
• Com uma frase só e sem sw-typewriter-loop="false", ele digita, apaga e redigita a mesma frase sem parar.