Simple typewriting effect

index.html

<!-- Example of usage -->

<span id="escreveTexto"></span>

typewriting.js

const palavras = ['text 1', 'text 2', 'text 3', 'text 4'];
const textoElement = document.getElementById('escreveTexto');
let index = 0;
let isDeleting = false;
let textoAtual = '';
let velocidadeEscrita = 100; // Typing speed
let velocidadeApagar = 35; // Erasing speed

function trocarTexto() {
  const palavraAtual = palavras[index];

  if (!isDeleting) {
    textoAtual = palavraAtual.substring(0, textoAtual.length + 1);
    textoElement.textContent = 'This is my ' + textoAtual;

    if (textoAtual === palavraAtual) {
      isDeleting = true;
      setTimeout(trocarTexto, 1500); // Time to initiate "erase"
    } else {
      setTimeout(trocarTexto, velocidadeEscrita);
    }
  } else {
    textoAtual = palavraAtual.substring(0, textoAtual.length - 1);
    textoElement.textContent = 'Claudio Fernandes é ' + textoAtual;

    if (textoAtual === '') {
      isDeleting = false;
      index = (index + 1) % palavras.length;
    }

    setTimeout(trocarTexto, velocidadeApagar);
  }
}

setTimeout(trocarTexto, 2000); // Start after 2 seconds