JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<div id="viewportMask"></div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    margin: auto;
    list-style:none;
}
ul li {
    width: 300px;
    height: 50px;
    background: #f5f5f5;
    float: left;
    margin: 10px;
    -webkit-transform: translate3d(0, 0, 0) scalee(0.8);
    -ms-transform: translate3d(0, 0, 0) scale(0.8);
    -o-transform: translate3d(0, 0, 0) scale(0.8);
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0.3;
    -webkit-transition: transform 0.5s, opacity 0.3s;
    -o-transition: transform 0.5s, opacity 0.3s;
    transition: transform 0.5s, opacity 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
ul li.middleviewport {
    background: red;
}
.active{
  -webkit-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    -webkit-transition: transform 0.5s, opacity 0.5s;
    -o-transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}
#viewportMask {
  position: fixed;
  top: 30%;
  bottom: 40%;
  left: 0;
  right: 0;
  background: red;
  opacity: 0.2;
}

JavaScript

$(document).ready(function () {
        var windowHeight = $(window).height(),
            gridTop = windowHeight * .3,
            gridBottom = windowHeight * .6;
        $(window).on('scroll', function () {
            $('ul li').each(function () {
                var thisTop = $(this).offset().top - $(window).scrollTop();

                if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                    $(this).css('background', 'red');
                    $(this).addClass('active')
                } else {
                    $(this).css('background', 'gray');
                    $(this).removeClass('active')
                }
            });
        });
  });