Tengo un sitio web de una página con una sección para una barra de progreso. Tengo una función para animación y todo eso, y sé cómo iniciarla cuando se carga la página. Pero no sé cómo iniciarlo cuando me desplazo a esa sección.
Código JS:
window.onload = function() { move(); }; var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 95) { clearInterval(id); i = 0; } else { width++; elem.style.width = width + "%"; } } } }Si desea activar el desplazamiento, puede hacerlo a través de jquery.
$(element).scroll(() ={ function () }Pero si desea animar en el desplazamiento, le aconsejo que use una biblioteca llamada Gsap. Busque en el documento scrollTrogger.
Simplemente use el evento de desplazamiento en todo el documento:
document.addEventListener('scroll', function(e) { move(); }); var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 95) { clearInterval(id); i = 0; } else { width++; elem.style.width = width + "%"; } } } } <div style="height:1000px;width:100%;"> <div style="height:200px">padding</div> <div id="myBar" style="background:green;">my bar</div> </div>