I found this jQuery plugin for creating images that scroll at different speeds: https://codepen.io/JTParrett/pen/nMmOBy.

The problem I'm having is that when the page has a greater height than what's in the demo, the images get pushed way out of their container and into the sections above. I realize this is happening because on scroll. translateY is being changed dynamically, but it's using the entire height of the page, as opposed to the height of the container the scrolling divs are in.

Is there a way to contain the scrolling items to their container, and have the translateY value be relative to only the parent container? Or another way to prevent the divs from breaking out of their container? Thanks!

$.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();
});