Как изменить прозрачность элемента при прокрутке страницы?

$(document).ready(function() { 
  var windowHeight = $(window).height(); 
  $(document).on('scroll', function() { 
    $('.opacity').each(function() { 
      var self = $(this), 
        height = self.offset().top + self.height(); 
      if ($(document).scrollTop() + windowHeight >= height) { 
        self.addClass('active').delay(100).css({ 
          "opacity": "1" 
        }) 
      } 
    }); 
  }); 
});

body, 
html { 
  margin: 0; 
  padding: 0; 
} 
 
.block { 
  height: 1000px; 
  background-color: chocolate; 
} 
 
.opacity { 
  background-color: blue; 
  padding: 10px; 
  opacity: 0; 
  font-size: 18px; 
  color: black; 
  transform: translateX(-100%); 
  transition: all .2s ease-out; 
  transition-duration: 2s; 
} 
 
.active { 
  transform: translateX(0%); 
  color: white; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block"></div> 
<div class="opacity">Есть текст на странице, у него opacity стоит 0, и как только пользователь его увидит (к примеру прокрутит страницу) то у него должна стать opacity 1 с неким transition, как такое сделать?</div> 
<div class="block"></div>