JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div id="sec-1" class="sections">Section ONE</div>
<div id="sec-2" class="sections">Section TWO</div>
<div id="sec-3" class="sections">Section THREE</div>
<div id="sec-4" class="sections">Section FOUR</div>
<div id="sec-5" class="sections">Section Five</div>

CSS

body{
  margin:0;
  padding:0;
  height:1500px;
}
.sections{
  width:100%;
  height:100vh;
  color:white;
  text-align:center;
  font-size:72px;
  line-height:100vh;
  text-shadow:0 0 5px rgba(0,0,0,0.7);
}
#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) {
        $(this).fadeOut(0);
    }
});

//show elements on scroll
$(window).scroll(function (event) {
    scrollPos = $(window).scrollTop();
    if (scrollPos >= currentSlide * winHeight) {
    		nextSlide = currentSlide + 2;
        $('#sec-' + nextSlide).fadeIn();
        if(currentSlide <= sections.length){
         currentSlide++;
        }
    }
});