SWCore / Componentes / Máquina de escrever

Máquina de escrever Componentes

Digita e apaga uma lista de palavras/frases, em loop — clássico de hero de landing page.

O que é

Efeito de texto sendo digitado letra a letra, com cursor piscando, alternando entre várias frases.

Como funciona

A lista de palavras vem como JSON no próprio atributo; o timing de digitar/apagar/pausar é interno, configurável via atributos separados se precisar.

Exemplos

Hero — 3 frases em looping Ao vivo

Fazemos sites rápidos.

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

<!-- deixe a 1ª frase escrita dentro do elemento: é o que aparece
     antes do JS entrar, e o que fica se ele não carregar -->
Velocidade — digitar, apagar e a pausa Ao vivo
Devagar: bem devagar…
Rápido: bem rápido!
Pausa longa: fico 4s parado…
<!-- ms por letra ao digitar (padrão 100) -->
<span sw-typewriter sw-typewriter-speed="220" …></span>

<!-- ms por letra ao apagar (padrão 50) -->
<span sw-typewriter sw-typewriter-back="20" …></span>

<!-- quanto tempo a frase fica parada antes de apagar (padrão 1500) -->
<span sw-typewriter sw-typewriter-delay="4000" …></span>
Sem looping e sem cursor Ao vivo
Para no fim: primeira,
Sem cursor: sem barrinha
Cursor próprio: cursor quadrado
<!-- digita tudo e para na última -->
<span sw-typewriter sw-typewriter-loop="false"
      sw-typewriter-words='["primeira,","e paro aqui."]'>primeira,</span>

<!-- sem cursor -->
<span sw-typewriter sw-typewriter-cur="" …></span>

<!-- outro cursor -->
<span sw-typewriter sw-typewriter-cur="▌" …></span>
Sem a lista — usando o texto que já está lá Ao vivo
Uma frase só: este texto foi digitado sozinho.
<!-- sem sw-typewriter-words, ele digita o próprio conteúdo do elemento -->
<span sw-typewriter>este texto foi digitado sozinho.</span>

Atributos

sw-typewriter-words
as frases, em JSON — sem ele, usa o próprio texto do elemento
sw-typewriter-speed
ms por letra ao digitar — padrão 100
sw-typewriter-back
ms por letra ao apagar — padrão 50 (apagar é mais rápido)
sw-typewriter-delay
quanto tempo a frase fica parada antes de apagar — padrão 1500
sw-typewriter-loop
"false" para na última frase em vez de recomeçar
sw-typewriter-cur
o caractere do cursor — padrão "|"; use "" pra não ter cursor

Variantes

(padrão)
digita, espera, apaga e passa pra próxima, em looping
sw-typewriter-loop="false"
digita a última frase e para ali
sw-typewriter-cur=""
sem cursor piscando

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

  • O texto é trocado letra a letra: buscadores e leitores de tela veem só o que está escrito dentro do elemento no HTML. Por isso, escreva ali a frase mais importante — não deixe o elemento vazio.
← AnteriorCotação de moedas Próximo →Realce de código