JSFiddle - React, Tailwind, and code Playground

by tucado

HTML

<p>scroll down (there are 2 elements)</p>
<div class="scrollfx">ELEMENT</div>    
<div class="scrollfx">ELEMENT</div>

CSS

body {
  height:1600px;
}

.scrollfx {

  width: 100%;
  height: 150px;
  background:blue;
  position: relative;
  top: 50px;
  font-size:4em;
  margin-top:500px;    
  filter: opacity(0);
}
.scrollfx.fadein {
  filter:opacity(1);
  transition: all 2.5s ease;
}

JavaScript

$(document).scroll(function () {

  var el = $('.scrollfx');
  var bottom = el.offset().top + el.outerHeight(true);
  var y = $(this).scrollTop();

  $('.scrollfx').each(function () {
    if (y = bottom) {
      $(this).addClass('fadein'); 
    }           
  });

});