3

Tenho um código de efeito de escrita, porém funciona só quando atualiza a página, eu queria que rodasse automaticamente, alguém pode dar uma força?

Abaixo está o código. o que preciso trocar ou acrescentar para que seja infinito, sem precisar ficar atualizando a página?

 function typeWriter(elemento) {
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = '';
    textoArray.forEach((letra, i) => {
      setTimeout(() => elemento.innerHTML += letra, 75 * i);
    });
  }
  const titulo = document.querySelector('h1');
  typeWriter(titulo);

Obs: a escrita tá vindo de um h1 que coloquei no HTML.

1 Resposta 1

3

Adicione outro setTimeout chamando a mesma função quando o índice do forEach alcançar a última letra do texto. O tempo desse intervalo você soma com o 75 * i. Por exemplo, se você quer repetir o efeito após 1 segundo dele ter terminado:

75 * i + 1000

Ficará assim:

function typeWriter(elemento) {
   const textoArray = elemento.innerHTML.split('');
   elemento.innerHTML = '';
   textoArray.forEach((letra, i) => {
      setTimeout(() => elemento.innerHTML += letra, 75 * i);
      if(textoArray.length-1 == i){
         setTimeout(() => typeWriter(elemento), 75 * i + 1000);
      }
   });
}

const titulo = document.querySelector('h1');
typeWriter(titulo);
<h1>teste de escrita</h1>

Adicionando uma barra no final

Coloque a barra | no final do texto e altere o script usando .pop() para remover a barra da array e a forma de alterar o innerHTML:

function typeWriter(elemento) {
   const textoArray = elemento.innerHTML.split('');
   textoArray.pop();
   elemento.innerHTML = '';
   textoArray.forEach((letra, i) => {
      setTimeout(() => elemento.innerHTML = elemento.innerHTML.replace("|", "") + letra +"|", 75 * i);
      if(textoArray.length-1 == i){
         setTimeout(() => typeWriter(elemento), 75 * i + 1000);
      }
   });
}

const titulo = document.querySelector('h1');
typeWriter(titulo);
<h1>teste de escrita|</h1>

2
  • muitooo obrigado.. deu certo! só por curiosidade, como que faço para colocar aquela barra ? Commented 4/06/2019 às 13:13
  • Adicionei na resposta. Veja se resolve.
    – Sam
    Commented 4/06/2019 às 13:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .