JSFiddle - React, Tailwind, and code Playground

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(){
  $(window).scroll(function(){
    $('.dark').each(function(i){

      var half_object = $(this).position().top + ($(this).outerHeight()/2);
      var bottom_window = $(window).scrollTop() + $(window).height();
      var bottom_object = $(this).position().top + $(this).outerHeight();

      console.log(half_object);

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