Text that you type little by little?

Question

Guys, I see an effect on the sites. The Text will appear (as if someone were typing it). Automatically I related to Mom, but the effect is not cool. You know how to do?

Answer 1

This is +/- simple. An example would be like this:

var div = document.getElementById('log');
var texto = 'Hoje está um lindo dia!';

function escrever(str, el) {
  var char = str.split('').reverse();
  var typer = setInterval(function() {
    if (!char.length) return clearInterval(typer);
    var next = char.pop();
    el.innerHTML += next;
  }, 100);
}

escrever(texto, div);

<div id="log"></div>

From a text string it breaks the string into an array, character by character and inverts the order (to use the .pop).

Then using the setInterval and .pop() Let’s empty this array with text.

jsFiddle: http://jsfiddle.net/yLy0jxeb/1/

Answer 2

Alternative:

var texto = "Hello World!!!";
var result;

var count = 0;
function digitar() {
  result = document.getElementById("result");
  window.setTimeout(function() { inserir(texto[count]) }, 200);
}

function inserir(letra) {
  result.innerHTML += letra;
  count++;
  if(count < texto.length)
    window.setTimeout(function() { inserir(texto[count]) }, 200);
}

window.onload = digitar;

<div id="result"></div>

Answer 3

Alternative to the colleague’s code [Sergio], so only to put everything in a function, without having global variables (which will hardly be used by other functions)

function typeWritter(texto,idElemento,tempo){
    var char = texto.split('').reverse();
    var typer = setInterval(function () {
        if (!char.length) return clearInterval(typer);
        var next = char.pop();
        document.getElementById(idElemento).innerHTML += next;
    }, tempo);
}
typeWritter('Hoje está um lindo dia!','log',100);

function typeWritter(texto,idElemento,tempo){
    var char = texto.split('').reverse();
    var typer = setInterval(function () {
        if (!char.length) return clearInterval(typer);
        var next = char.pop();
        document.getElementById(idElemento).innerHTML += next;
    }, tempo);
}
typeWritter('Hoje está um lindo dia!','log',100);

<div id="log"></div>

Jsfiddle http://jsfiddle.net/yLy0jxeb/15/

Answer 4

An alternative to [Sergio] code using an anonymous function:

(function() {
  var node = document.getElementById('message'),
    message = "This is my message... ! Thx =)",
    current = message.split("").reverse(),
    interval = setInterval(function() {
      if (current.length)
        node.innerHTML += current.pop();
      else
        clearInterval(interval);
    }, 300);
}());

<div id="message"></div>