Texto com efeito de maquina de escrever.

Anime um texto usando efeito de maquina de escreve ou alguém digitante, onde cada letra é carregada uma de cada vez.

Primeiro crie uma Tag HTML, com uma Class e um pequeno texto.

<h2 class="escrever">Estou escrevendo uma frase.</h2>

Agora vamos criar o código em Javascript.

Primeiro, pegue a frase usando o "querySelector", colocando dentro de uma constante.

const texto = document.querySelector(".escrever");

Segundo, vamos criar um objeto construtor, com a função "animar" que recebe um parâmetro "frase".

function animar(frase) {

}

OBS o parâmetro "frase" recebe o valor da constante.


Terceiro, será criado outra constante, transformando o texto em um Array usando split, e logo depois transformando o valor em uma string vazia, dessa forma permite que cada letra seja carregada.

function animar(frase) {
      const textoArray = frase.innerHTML.split('');

      //iniciar vazio
      frase.innerHTML = " ";
}

Se você usar somente innerHTML, o array será uma unica frase, mas se acrescentar split o array sera cada letra.


Quarto, é nessa parte que a frase ganha a animação, onde será necessário criar mais uma função que recebe a letra e o valor do índice da letra.

function animar(frase) {
      const textoArray = frase.innerHTML.split('');

      frase.innerHTML = " ";

        textoArray.forEach(function(letra, indice){

})
}

Mas para animar um de cada vamos usar o setTimeout(), com uma função dentro que adiciona as letras.

function animar(frase) {
      const textoArray = frase.innerHTML.split('');

      frase.innerHTML = " ";

        textoArray.forEach(function(letra, indice){
setTimeout(function(){ frase.innerHTML += letra },80 * indice)
})
}

Atenção que o tempo esta em 80 milissegundos e a cada letra adicionada ele pega o valor do seu índice e multiplica por 80, assim cada letra tem o seu tempo para aparecer.

Para finalizar chame a função animar e o parâmetro texto.

animar(texto)

Código completo.

const texto = document.querySelector(".escrever");

function animar(frase) {
    const textoArray = frase.innerHTML.split('');
    frase.innerHTML = " ";

    textoArray.forEach(function(letra, indice){
setTimeout(function(){ frase.innerHTML += letra },80 * indice)
})
}

animar(texto)

Vai criar um site?
Conte com uma agencia de criação de sites.

Agência Nova Ação, com mais de 15 anos de experiência em Web Design, nós Desenvolvemos o seu Site com o foco nos Resultados da sua Empresa.