JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

//задаем анимацию при появлении на экране
<div class="box">kjlnbfklmbvrfklmbfklmbv</div>
<div class="box mox">kjlnbfklmbvrfklmbfklmbv</div>

CSS

.box{background-color:green;height:100px;opacity: 0.1;}
.mox{margin-top:1000px;}

JavaScript

function inWindow(s){
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var currentEls = $(s);
  var result = [];
  currentEls.each(function(){
    var el = $(this);
    var offset = el.offset();
    if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight))
      result.push(this);
  });
  return $(result);
}
function skrollthiswindow(){
var boxesInWindow = inWindow("div.box");
 
// сделаем фон этих элементов красным
//boxesInWindow.css("background-color", "red");
boxesInWindow.css("opacity", "1");
}

$(window).scroll(function(){
    skrollthiswindow();
});