JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<body>
    <div class="container">
        <div class="main"></div>
        <div class="game2 dark"></div>
        <div class="game3 dark"></div>
        <div class="game4 dark"></div>
    </div>
</body>

CSS

.body {
    background-color:black;
    color:white;
}
.container {
    background-color:black;
}
.main {
    position: relative;
    width: 100%;
    height: 600px;
    background-color:purple;
    padding-top:1em;
}
.game2, .game3, .game4 {
    height:13.3333em;
    width:100%;
}
.game2 {
    background-color:green;
}
.game3 {
    background-color: blue;
}
.game4 {
    background-color:orange;
}
.dark {
    opacity: .5;
}

JavaScript

$(document).ready(function () {
    var $window = $(window);
    $window.scroll(function () {
        var windowHeight = $window.height();
        var scrollTop = $window.scrollTop();
        $('.dark').each(function (i) {
            var $this = $(this);
            var top = $this.position().top;
            var outerH = $this.outerHeight();
            var half_object = top + (outerH / 2);
            var bottom_window = scrollTop + windowHeight;
            var bottom_object = top + outerH;

            console.log(half_object);

            if (bottom_window > half_object) {
                $this.stop().animate({
                    'opacity': '1'
                }, 200);
            } else if (bottom_object > scrollTop) {
                $this.stop().animate({
                    'opacity': '.5'
                }, 200);
            }
        });
    });
});