JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>

CSS

html, body {height:100%; min-height:100%; margin:0;}
div {height:60%; background:pink; margin:20px; opacity:0.3;}
div.inview {opacity:1}

div + div {height:110%;}
div + div + div {height:60%;}

JavaScript

function testInView($el){
    var wTop = $(window).scrollTop();
    var wBot = wTop + $(window).height();
    var wMid = wBot - ($(window).height()/2);
    var eTop = $el.offset().top;
    var eBot = eTop + $el.height();
    return ((eTop <= wMid) && (eBot >= wMid));
}
function setInView(){
    $("div").each(function(){
        var zis = $(this);
        zis.removeClass("inview");
        if(testInView(zis)){
           zis.addClass("inview");   
        }
    });
}
$(document).scroll(function(){
    setInView();
});
$(document).resize(function(){
    setInView();
});
$(document).ready(function(){
    setInView();
});