JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>

<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section class="reveal">Reveal content as we scroll</section>
<section...

CSS

.reveal {
    
    background: #000;
    color: #fff;
    width: 100px;
    padding: 50px;
    float: left;
    height: 95px;
    margin: 10px;
}

.noshow  { display: none; }

JavaScript

$(function() {
   
    /**
		* Reveal Sections as the users scrolls - Development Ongoing
		* Get the nth div of class content, where n is the contentNumber, and make it shown
		* Set intital divs to be hidden
	*/

    $(".reveal").addClass("noshow");
    var contentNumber = 0;
    
    function reveal() {
        var constraintNumber = contentNumber + 7;
        //IMPORTANT - DO NOT DELETE
        $(window).trigger('resize');
        //IMPORTANT - DO NOT DELETE
        for (i = contentNumber; i < constraintNumber; i++) {
            //Get the nth div of class content, where n is the contentNumber, and make it shown
            $('.reveal').eq(contentNumber).removeClass("noshow");
            contentNumber ++;
        }
    }
    
    //Window scroll function
    $(window).scroll(function() {
       if ($(window).scrollTop() == $(document).height() - $(window).height() )
        {
            reveal();
        }
    });
    reveal();
});