JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="parallax">



  <div class="group" data-height="">



    <div style="width:50%;left:0%;z-index:1" data-top="1" data-speed="2">
      <picture data-ratio data-format="portrait" style="padding-bottom:128.97%;"></picture>
    </div>




    <div style="width:83.333333333333%;left:8.3333333333333%;z-index:2" data-top="6" data-speed="1">
      <picture data-ratio data-format="landscape" style="padding-bottom:93.31%;"></picture>
    </div>




    <div style="width:33.333333333333%;left:66.666666666667%;z-index:3" data-top="2" data-speed="2.5">
      <picture data-ratio data-format="portrait" style="padding-bottom:129.29%;"></picture>
    </div>


    <div style="width:50%;left:0%;z-index:4" data-top="14" data-speed="2.5">
      <picture data-ratio data-format="portrait" style="padding-bottom:133.33%;"></picture>
    </div>




    <div style="width:50%;left:50%;z-index:5" data-top="14" data-speed="1">
      <picture data-ratio data-format="landscape" style="padding-bottom:69.38%;"></picture>
    </div>



  </div>



  <div class="group" data-height="">



    <div style="width:83.333333333333%;left:8.3333333333333%;z-index:1" data-top="1" data-speed="2">
      <picture data-ratio data-format="landscape" style="padding-bottom:75%;"></picture>
    </div>




    <div style="width:50%;left:41.666666666667%;z-index:2" data-top="6" data-speed="2">
      <picture data-ratio data-format="portrait" style="padding-bottom:133.33%;"></picture>
    </div>



  </div>



  <div class="group" data-height="">



    <div style="width:33.333333333333%;left:0%;z-index:1" data-top="1" data-speed="3">
      <picture data-ratio data-format="portrait" style="padding-bottom:129.66%;"></picture>
    </div>




    <div style="width:33.333333333333%;left:25%;z-index:2" data-top="5" data-speed="3.5">
      <picture data-ratio data-format="portrait"...

SCSS

.parallax {
	position: relative;
  overflow: hidden;
	z-index: 1;
	.group {
		position: relative;
		> div {
			position: absolute;
      picture {
        display: block;
      }
		}
	}
}

JavaScript

function parallaxInit() {

  var $container = $('.parallax'),
    container = $container[0];

  var testArray = [],
    $testLastElement;

  $('.parallax > .group').each(function() {

    var $group = $(this),
      group = $group[0],
      groupBounds = group.getBoundingClientRect(),
      $lastElement,
      lastElementBoundsBottom = 0;

    $group.find('> div').each(function() {

      var $div = $(this),
        div = $div[0],
        initTop = $div.attr('data-top');

      if (initTop == 0) {
        $div.css('top', '0');
      } else {
        $div.css('top', $(window).width() / 12 * initTop - 26 + 'px');
      };

      group.removeAttribute('style');
      $group.height(group.scrollHeight).attr('data-height', group.scrollHeight);

      var divBounds = div.getBoundingClientRect();
      testArray.push(divBounds.bottom);

    });

  });

  $('.parallax > .group > div').each(function() {

    var divBottomBounds = $(this)[0].getBoundingClientRect().bottom;

    if (divBottomBounds == Math.max.apply(Math, testArray)) {
      $testLastElement = $(this);
      $(this).addClass('is--last');
    }

    var letters = "0123456789ABCDEF";
    var color = '#';
    for (var i = 0; i < 6; i++) color += letters[(Math.floor(Math.random() * 16))];
    $(this).css('background-color', color);


  });

  $container[0].style.height = $testLastElement[0].getBoundingClientRect().bottom + 'px';

}
parallaxInit();
$(window).on('resize', parallaxInit);






function parallax() {

	var $container = $('.parallax');

	var test = 0;
	var testArray = [],
		$testLastElement;

	$('.parallax > .group').each(function() {

		var $group = $(this),
			group = $group[0],
			groupHeight = $group.attr('data-height'),
			groupBounds = group.getBoundingClientRect();

		$group.find('> div').each(function() {

			var $this = $(this),
				speed = $this.attr('data-speed');

			if (speed < 0) {
				speed = Math.abs(speed);
				var yPos = window.pageYOffset / speed;
			} else {
				var yPos =...