JSFiddle - React, Tailwind, and code Playground

by Roy Howie

HTML

<div id="container">    
    <div>shown</div>
    <div>shown</div>
    <div>shown</div>
    <div>shown</div>
    <div>shown</div>
    <div>shown</div>
    <div class="hide">Fade In</div>
    <div class="hide">Fade In</div>
    <div class="hide">Fade In</div>
    <div class="hide">Fade In</div>
    <div class="hide">Fade In</div>    
</div>

CSS

#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:20px; 
    padding:80px; 
    background-color:gray; 
}

.hide
{
opacity:0;
}

JavaScript

$(document).ready(function() {
    $(window).scroll( function(){
        $('.hide').each( function(i){
            var bottom_of_object = $(this).position().top;
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){ 
                $(this).animate({'opacity':'1'},500);     
            }   
        }); 
    
    });
    
});