Text that is typed in the Few?

Question

Text that is typed in the Few?

Navigation

#1 by (19 votes)
#2 by (5 votes)
#3 by (5 votes)
#4 by (2 votes)

10

People, I see an effect on the sites. The text will appear (as if someone was typing it). Automatically I related to the marquee, but the effect is not legal. Do you know how to do it?

javascript html

asked by anonymous 14.05.2015 / 22:37

4 answers

How to capture textarea tag with new line? Calculations used to rotate an image on canvas

score 19 · Answer 1

This is +/- simple. An example would look 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 be able to use .pop ).

Then using setInterval and .pop() vams emptying this array with text.

jsFiddle: link

score 5 · 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>

score 5 · Answer 3

Alternative to colleague's code [Sergio], just 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 link

score 2 · Answer 4

An alternative to the [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>