Criar um efeito de digitação automática (`typewriter effect`).

Hoje é o último dia da primeira semana, marcando também o fim dos meus projetos menores. Nos próximos dias, começaremos a criar um site completo, e usaremos esses projetos como páginas de exemplo. Mas vamos ao objetivo de hoje, que é criar um efeito de “typewrite”.

No HTML, criei dois textos de exemplo: um pequeno com um <h1> e um maior com um <p>.

Agora, no JavaScript, fiz a seguinte função:

function TypeWrite(element) {
  let speed = 50;
  let i = 0;
  let texto = element.innerText;

  element.innerText = "";

  function Escrever() {
    if (i < texto.length) {
      element.innerHTML += texto.charAt(i);
      i++;
      setTimeout(Escrever, speed);
    }
  }
  Escrever();
}

A função começa pegando o texto do elemento e definindo a velocidade do efeito de digitação. Em seguida, ela apaga o texto original e cria uma nova função interna, Escrever, que é responsável por adicionar um caractere por vez ao conteúdo do elemento. A cada chamada da função, verifica-se se ainda há caracteres a serem digitados. Caso haja, ela exibe um caractere com um delay definido pela variável speed.

Aqui, caso eu queira adicionar mais textos com essa função direto pelo JS, posso criar algo parecido com isso:

window.onload = function () {
  const pElement = document.createElement("p");
  pElement.innerHTML = "novo paragrafo criado";

  document.body.appendChild(pElement);
  TypeWrite(pElement);
};

Dessa forma, posso criar um elemento e passá-lo para o HTML já com a função aplicada a ele.

---

O resultado final você pode conferir aqui
link para o repositorio do projeto