in viewport

by Bastien Leprince

HTML

<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>
</ul>

CSS

ul {
  margin: auto;
}

ul li {
  width: 100%;
  max-width: 960px;
  height: 300px;
  opacity: 0;
  float: left;
  margin: 10px;
  list-style: none;
  background: silver;
  transition: transform 1.0s ease, opacity 1.0s ease;
  transform: translate(0, 50px);
}

ul li.middleviewport {
  opacity: 1;
  transform: translate(0, 0);
}

JavaScript

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

          if ((thisTop + 30) < gridBottom) {
            $(this).addClass("middleviewport");
          }
        });
      });
      $(window).trigger('scroll');
    });