0

É o seguinte, preciso que uma frase apareça como se estivesse sido digitada na tela, e após a primeira frase aparecer por completo, deve surgir uma nova da mesma forma que a anterior. A parte de aparecer o texto, já foi feita, mas não sei como implementar a parte de substituição de frase. Alguém tem alguma ideia de como isso possa ser feito?

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

const titulo = document.querySelector('.fundo-roxo');
typeWriter(titulo);
<div class="col-xs-12 col-md-12">
  <h1 class="titulo-linha-1"><span class="fundo-roxo">Texto 1.</span></h1>
</div>

1 Resposta 1

0

Você pode resolver isso com uma função chamada Slice, tendo duas variáveis uma para manter o texto e outra que vai alterar, e fazendo um loop para que seja possível tratar tratar essa variável, etão seu código ficaria parecido com algo assim:

Primeiro separaria duas variáveis para tratar sendo que a primeira ficaria vazia e a segunda com o texto que não vai ser alterado.

var textoTratar = '';
var textCompleto = 'Texto 1.';

Para escrever você poderia pegar uma letra por vez dessa variável e adicionando aos poucos.

//Escrever
for (var i = 0; i < textCompleto.length; i++) {

    //console.log(i);

    textoTratar += textCompleto.slice(i, i + 1);

    document.getElementById('alpha').innerHTML = textoTratar;

}

E para apagar você pode fazer o processo reverso, pegando o próprio texto e removendo uma letra de cada vez

//Apagar
for (var i = 0; i < textCompleto.length; i++) {

    //console.log(i);

    textoTratar = textoTratar.slice(0, textoTratar.length - 1);

    document.getElementById('alpha').innerHTML = textoTratar;

}

NOTA: eu fiz o loop com um for, mas você pode utilizar o tipo de loop que você preferir, pois o for vai ser muito rápido e não vai dar para ver o efeito de escrever na tela.

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 .