JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
  <p>
  Scroll the page down until the top of the box is slightly out of the viewport
  </p>
  <div id="overflowwrap">
    <div id="one" class="box">a lot of content</div>
    <div id="two" class="box">a lot of content</div>
    <div id="three" class="box">a lot of content</div>
    <div id="four" class="box">a lot of content</div>
    <div id="five" class="box">a lot of content</div>
  </div> 
</div>

CSS

#outer {
  /* emulate box being present on larger page */
  padding: 10em 1em;
  background: violet;
}
#overflowwrap {
  overflow: hidden !important;
  position: relative;
}
.box {
  height: 800px;
  width: 100%;
  display: none; /* initially hidden */
  position: absolute;
  z-index: 1;
}
.fading-in {
  /* make sure the one fading in is always on top */
  z-index: 2;
}

#one { background-color: red; }
#two { background-color: orange; }
#three { background-color: yellow; }
#four { background-color: green; }
#five { background-color: blue; }

JavaScript

$('#overflowwrap').css('height',$(window).height());

function run () {
  $("#one").addClass('fading-in').fadeIn(500);
  setTimeout( function() {
    $("#two").addClass('fading-in').fadeIn(500);
  }, 3000);
  setTimeout( function() {
    $("#three").addClass('fading-in').fadeIn(500);
  }, 6000);
  setTimeout( function() {
    $("#four").addClass('fading-in').fadeIn(500);
  }, 9000);
  setTimeout( function() {
    $("#five").addClass('fading-in').fadeIn(500);
  }, 12000);
  setTimeout( function() {
  	$(".box").removeClass('fading-in').not('#five').hide();
    run();
  }, 15000);
}
run();