0

El efecto funciona bien pero al seguir bajando o subiendo con el scroll la velocidad aumenta demasiado si se a que se debe pero no se como arreglarlo, alguna solución?

var i = 0;
var texto = 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat';
var velocidad = 500;

function typeWriter() {
  if (i < texto.length) {
    document.getElementById("escribir").innerHTML += texto.charAt(i);
    i++;
    setTimeout(typeWriter, velocidad);
  }
}

function Scroll() {
  let scrollTop = document.documentElement.scrollTop;

  if (scrollTop > 264) {
    typeWriter()
  }
  
}

window.addEventListener("scroll",Scroll)
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>

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

    <p id="escribir"></p>

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


    <script src="app.js"></script>
</body>

</html>

1 respuesta 1

1

Te pongo dos métodos para solucionar tu fallo:

  • El primero seria borrar el eventListener si ya no es necesario
  • El segundo tener una variable que te indique que ya esta escribiendo y saltarte la ejecución de nuevo en caso de ser true

var i = 0;
var texto = 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, placeat';
var velocidad = 500;

let escribiendo = false

function typeWriter() {
  if (i < texto.length) {
    document.getElementById("escribir").innerHTML += texto.charAt(i);
    i++;
    setTimeout(typeWriter, velocidad);
  }
}

function Scroll2() {

  if (escribiendo) return

  let scrollTop = document.documentElement.scrollTop;

  if (scrollTop > 264) {
    escribiendo = true
    typeWriter()
  }
  
}

function Scroll1() {

  let scrollTop = document.documentElement.scrollTop;

  if (scrollTop > 264) {
    window.removeEventListener("scroll", Scroll1)
    typeWriter()
  }
  
}

window.addEventListener("scroll",Scroll1)
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>

<body>

    <p id="escribir" style="padding: 1000px 0;"></p>

</body>

</html>

2
  • ¡Muchas gracias!, tienes idea de como se llama o como agregarle la barra | que parpadea cuando dejamos de escribir?
    – Franco
    Commented el 1 abr. 2020 a las 0:59
  • 1
    Prueba buscando "blinking cursor html" Commented el 1 abr. 2020 a las 10:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.