10

Gente, Eu vejo um efeito nos sites. O Texto vai aparecendo (Como se alguém estivesse digitando ele). Automaticamente eu relacionei á marquee, mas o efeito não é legal. Vocês sabem como fazer?

1

4 Respostas 4

22

Isso é +/- simples. Um exemplo seria assim:

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>

De uma string de texto ele parte a string numa array, caracter por caracter e inverte a ordem (para poder usar o .pop).

Depois usando o setInterval e .pop() vams esvaziando essa array com texto.

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

1
  • 2
    o mais bonito deste código é o clearInterval ;D
    – MoshMage
    2/02/2017 às 22:51
6

Alternativa:

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>

6

Alternativa ao código do colega [Sergio], tão somente para colocar tudo em uma função, sem ter variáveis globais (que dificilmente serão usadas por outras funções)

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/

3
  • 1
    Oi Rodrigo! Só agora vi a tua resposta :) Quando dizes "colocar tudo em uma função, sem ter variáveis globais" isso é o que eu fiz... Não há variáveis globais no meu código e está tudo numa função... podes explicar melhor a diferênça que apontas?
    – Sergio
    26/11/2018 às 11:54
  • As variáveis que colocou como globais foram div e texto, nas duas primeiras linhas do seu código. O que eu fiz foi colocá-las dentro da função. A intenção foi apenas mostrar o uso sem elas e passando o id do elemento ao invés do próprio elemento. É uma mera alternativa, seu código está correto. :D 6/12/2018 às 20:08
  • Havia esquecido, coloquei um parâmetro para o tempo da digitação. 6/12/2018 às 20:18
3

Uma alternativa ao código do [Sergio] utilizando uma função anônima:

(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>

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 .