JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="D" id="d1"><img src="https://fastly.picsum.photos/id/24/4855/1803.jpg?hmac=ICVhP1pUXDLXaTkgwDJinSUS59UWalMxf4SOIWb9Ui4"></div>
<div class="D" id="d2"><img src="https://fastly.picsum.photos/id/29/4000/2670.jpg?hmac=rCbRAl24FzrSzwlR5tL-Aqzyu5tX_PA95VJtnUXegGU"></div>
<div class="D" id="d3"><img src="https://fastly.picsum.photos/id/28/4928/3264.jpg?hmac=GnYF-RnBUg44PFfU5pcw_Qs0ReOyStdnZ8MtQWJqTfA"></div>
<div class="D" id="d4"><img src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"></div>
<div id="contents">

</div>

CSS

.D {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#d1 {z-index: 4;}
#d2 {z-index: 3;}
#d3 {z-index: 2;}
#d4 {z-index: 1;}

img {
  width: 100%;
  height: 100%;
}

#contents {
  position: relative; 
  z-index: 5;
  color: yellow;
  font: 30px verdana;
  line-height: 3em;
}

JavaScript

$('body').css({
  height: $(window).height()*4
});

$('img').each(function() {
  $(this).css({
    height: $(window).height()
  });
});

$(window).scroll(function() {
  $('.D').each(function(index) {
    $(this).css({
      height: $(window).height()*(index+1) - $(window).scrollTop()
    });
  });
});