Help in Jquery code type text alone

Question

Help in Jquery code type text alone

Navigation

#1 by (2 votes)

1

I found the code on the internet to type a text by jquery alone, but I want to add a delay in it to just start typing when the page scrolls in the section I want, how to add this function?

js code

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);

The div is this:

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

javascript texto

asked by anonymous 22.03.2018 / 23:27

1 answer

How do I get the highest value in an array with JavaScript? how to work with Bootstrap table?

score 2 · Accepted Answer

When div is visible on the screen, it will call the function that writes:

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>