JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div id="sec-1" class="sections">
  <h2>Section ONE</h2>
  <div>
    <img src="//placehold.it/400x200?text=IMG-1">
    <p>Pudding cake cake jelly-o topping halvah fruitcake jelly beans powder. Lemon drops gummi bears jelly-o. Cotton candy sesame snaps tiramisu icing pastry bear claw bonbon. Cotton candy muffin brownie. Pie apple pie tart chocolate bar gummies sweet roll
      marshmallow cupcake. Liquorice dessert liquorice. Muffin cupcake dragée chupa chups biscuit brownie chocolate.
    </p>
  </div>
</div>
<div id="sec-2" class="sections">
  <h2>Section TWO</h2>
  <div>
    <img src="//placehold.it/200x250?text=IMG-2" style="float:left;margin:0 5px;">
    <p>Carrot cake gummi bears fruitcake gummies gummies tootsie roll. Sweet roll chocolate cake carrot cake donut chocolate lemon drops sesame snaps. Carrot cake pastry caramels chocolate bar wafer lollipop. Danish donut dragée candy jujubes. Toffee donut sweet lemon drops brownie tootsie roll pie. Pastry macaroon candy canes chocolate bar tiramisu. Tiramisu chupa chups dessert jujubes. Candy chupa chups tiramisu lemon drops.<br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione soluta libero nemo, in illum illo, placeat cupiditate architecto eveniet praesentium sapiente. Mollitia animi vero cupiditate autem atque, fugit doloremque. Rerum!
    </p>
  </div>
</div>
<div id="sec-3" class="sections">
  <h2>Section THREE</h2>
  <div>
    <img src="//placehold.it/200x300?text=IMG-3" style="float:right;margin:0 5px;">
    <p>Wafer cupcake sweet roll caramels icing. Icing gummi bears pudding danish pie gummies tart. Bonbon danish gingerbread gummi bears topping carrot cake cotton candy liquorice halvah. Pudding cake gummi bears topping. Fruitcake jelly-o biscuit caramels. Donut sesame snaps cookie pastry brownie tart gummi bears cake wafer. Tiramisu dragée marshmallow dessert gummi bears gingerbread donut marzipan danish.<br>
    Dessert cupcake cookie sugar plum lollipop. Powder sesame snaps cake...

CSS

body {
  margin: 0;
  padding: 0;
  height: 1500px;
}
.sections {
  width: 100%;
  height: 100vh;
  color: white;
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.sections h2 {
  padding: 0;
  margin: 50px 0 20px 0;
  display: inline-block;
}
.sections p{
  margin:5px;
}
#sec-1 {background-color: green}
#sec-2 {background-color: orange}
#sec-3 {background-color: tomato}
#sec-4 {background-color: skyblue}
#sec-5 {background-color: navy}

JavaScript

//initialize
var winHeight = $(window).height(),
  sections = $('.sections'),
  currentSlide = 0;
$('html, body').animate({
  scrollTop: 0
}, 0);

//hide elements not in the view as the page load for the first time
sections.each(function() {
  if ($(this).offset().top > winHeight - 5) {
  	// fadeOut all children elements of sections not in the veiw
   $(this).children().fadeOut(0);
  }
});

//show elements on scroll
$(window).scroll(function(event) {

  // retrieve the window scroll position, and fade in the content of the 2nd next section 
  // that its offset top value is less than the scroll
  scrollPos = $(window).scrollTop();
  if (scrollPos >= currentSlide * winHeight) {
    nextSlide = currentSlide+2;
    $('#sec-' + nextSlide).children().fadeIn(1500);

    // as long as current slide is still in range of the number of sections
    // we increase it by one. 
    if (currentSlide <= sections.length) {
      currentSlide++;
    }
  }
});