Encontré este complemento jQuery para crear imágenes que se desplazan a diferentes velocidades: https://codepen.io/JTParrett/pen/nMmOBy .

El problema que tengo es que cuando la página tiene una altura mayor que la de la demostración, las imágenes se salen de su contenedor y pasan a las secciones de arriba. Me doy cuenta de que esto está sucediendo porque en el desplazamiento. translateY se cambia dinámicamente, pero usa toda la altura de la página, a diferencia de la altura del contenedor en el que se encuentran los divs de desplazamiento.

¿Hay alguna manera de contener los elementos de desplazamiento en su contenedor y hacer que el valor de translateY sea relativo solo al contenedor principal? ¿O otra forma de evitar que los divs se salgan de su contenedor? ¡Gracias!

 $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($(this))); }); window.addEventListener('scroll', function(){ var scrollTop = $window.scrollTop(); instances.forEach(function(inst){ inst.update(scrollTop); }); }, {passive: true}); } var moveItItem = function(el){ this.el = $(el); this.speed = parseInt(this.el.attr('data-scroll-speed')); }; moveItItem.prototype.update = function(scrollTop){ this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)'); }; // Initialization $(function(){ $('[data-scroll-speed]').moveIt(); });