Estoy tratando de implementar una animación que cambia las imágenes en el desplazamiento cuando está envolviendo los desplazamientos div en la ventana gráfica. Mi problema es que la animación comienza tan pronto como alguien comienza a desplazarse, por lo que la animación ya está al final cuando #wrapper aparece en la ventana gráfica.

¿Cómo lograr que la animación comience cuando #wrapper se desplaza a la ventana gráfica?

Desafortunadamente, mi conocimiento de JS/jQuery es muy pobre, pero esto es lo que obtuve hasta ahora:

JSFiddle

HTML:

 <div class="page_content_before_image_animation"> <p>lorem ipsum …</p> </div> <div id="load" data-images="19"></div> <div id="wrapper"> <img class="sequenzbilder" src="https://twdp.de/sequence/1.jpg" width="600" height="661" /> </div>

JS:

 var images = []; for (i = 1; i <= $('#load').attr('data-images'); i++) { images.push('https://twdp.de/sequence/' + i + '.jpg'); } $(images).each(function() { $('<img class="sequenzbilder" />')[0].src = this; }); var totalImages = images.length; var pageHeight = $(document).height() - $(window).height(); var scrollInterval = Math.floor(pageHeight / 140); var viewport = $(window), slowdown; viewport.on('scroll', function() { i = Math.floor($(this).scrollTop() / scrollInterval); $('.sequenzbilder').attr('src', images[i]); slowdown = Math.ceil(viewport.scrollTop() / 20); });