1

Encontrei na internet esse código pra digitar um texto sozinho pelo jquery, mas quero adicionar um delay nele pra só começar a digitar qdo a pagina rolar na section que quero, como adicionar essa função?

Código js

var div = document.getElementById('texto');
var texto = 'Porque Contratar a Two Way?';

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;
  }, 200);
}

escrever(texto, div);

A div é esta:

<div id="texto"></div>

1 Resposta 1

2

Quando a div ficar visível na tela, irá chamar a função que escreve:

var div = document.getElementById('texto');
var texto = 'Porque Contratar a Two Way?';
var flag = false; // flag para que função seja chamada apenas 1 vez

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;
  }, 200);
}

document.addEventListener("scroll", function(){
   var docScrl = document.documentElement.scrollTop, // pega o scroll da janela
       el = div.offsetTop, // distância da div ao topo
       winHeight = window.innerHeight; // altura da janela

   if(el-docScrl <= winHeight && !flag){
      flag = true;
      escrever(texto, div);
   }
});
role a janela para baixo
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div id="texto"></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

5
  • Poxa perfeito, era isso que queria, muito obrigado! Commented 23/03/2018 às 16:40
  • por que ao inserir dois códigos mudando só o ID não funciona? Criei outra div como texto2 e inseri o código novamente e coloquei nos id texto2 mas não funciona. Commented 23/03/2018 às 18:17
  • Vou ver pra vc....
    – Sam
    Commented 23/03/2018 às 18:29
  • Basicamente teria que criar variáveis pra cada div, veja: jsfiddle.net/foj26f8m/1
    – Sam
    Commented 23/03/2018 às 19:39
  • Perfeito mano, vlw Commented 25/03/2018 às 18:30

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 .