JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="marginTop"></div>
<div class="col-lg-12 text-center contImgs show">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div><div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="col-lg-12 text-center contImgs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

.marginTop{
    margin-top:200px;
}
.text-center{
    text-align:center;
}

.contImgs{
    margin-bottom:20px;
    opacity:0;
    -webkit-transition:1s;
    position:relative;
    top:15px;
}
.contImgs.show{
    opacity:1;
    top:0;
}
.contImgs span{
    width: 22%;
    height:80px;
    background:green;
    display:inline-block;
    vertical-align:top;

}

JavaScript

$(function(){
    var contsImgs = $('.contImgs');
    var top;
    
    function distancia(e){
        top = $(e).offset().top;
        return top
    }
    
    console.log($(contsImgs[1]).offset().top)
    
    if(contsImgs.length){
        $(window).bind('scroll',function(){
            var scroll = $(window).scrollTop();
            for(var i = 0; i < contsImgs.length; i++){
                if(scroll > (distancia(contsImgs[i]) - 300) ){
                    $(contsImgs[i]).addClass('show');
                    console.log(distancia(contsImgs[i]));
                }else{
                    $(contsImgs[i]).removeClass('show');
                }
            }
        });
    }
    
});