Como fazer texto que se digita sozinho com JavaScript

Neste artigo você vai aprender como fazer um texto que se digita sozinho com JavaScript, onde as letras vão aparecendo uma por uma após um tempo

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender a como criar um texto que se digita aos poucos e de tempo em tempo as letras vão aparecendo

A ideia é bem simples:

• Precisamos ter um texto como base;
• Um elemento que o texto será impresso;
• Um tempo para que cada uma das letras seja inserida;

Vamos então ao código:

<div id="text"></div>

Este é o HTML que vamos utilizar, o texto vai aparecer dentro desta div

Veja o JavaScript necessário:

var el = document.querySelector("#text");
var text = "JavaScript é muito bom!"
var interval = 200;
function showtext(el, text, interval) {
  var char = text.split("").reverse();
  
  var typer = setInterval(function() {
  
    if (!char.length) {
    	return clearInterval(typer)
    }
    
    var next = char.pop();
    
    el.innerHTML += next;
    
  }, interval);
  
}
showtext(el, text, interval);

Primeiramente definimos as variáveis, o texto que vamos imprimir, o elemento que o texto será impresso e o tempo de cada caractere em ms

Na função showText temos diversas ações, primeiro a string é dividida em cada um dos caracteres com split e também a invertemos

Depois criamos um setInterval com o tempo definido anteriormente, este será o evento que vai inserir um caractere por vez na div

Realizamos também uma checagem para verificar se ainda há caracteres para serem exibidos, caso não realizamos um retorno para encerrar a função

Por último utilizamos o método pop para retirar um caractere da string total, e com innerHTML inserimos este caractere na div alvo

E assim cada um dos caracteres será impresso no tempo que determinamos, observe que o mesmo é totalmente customizável

Conclusão

Neste artigo vimos como criar um texto que se digita sozinho com JavaScript

Desenvolvemos uma função que insere cada um dos caracteres de uma string pré definida com base em um tempo inserido como argumento

Então cada um dos caracteres vai sendo inserido e a string vai se formando no elemento alvo

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube