<div class="container"> 
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
  <div class="box fadeIn"></div>
</div>

@charset "UTF-8";

*,
*:before,
*:after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  padding: 40px 0;
}
.box{
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #ddd;
  aspect-ratio: 5 / 2;
  + .box{
    margin-top: 8rem;
  }
}

.fadeIn {
  transition: all .8s;
  transform: translateY(80px);
  opacity: 0;
}
.fadeIn.active {
  transform: translateY(0);
  opacity: 1;
}

$(function(){
　$(window).scroll(function (){
    $('.fadeIn').each(function(){
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight + 50){
          $(this).addClass('active');
      }
    });
　});
});