Slide In (as you scroll down) Boxes

https://css-tricks.com/slide-in-as-you-scroll-down-boxes/

by vovkasolovev

HTML

<section>

  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>
  <div class="module"></div>

</section>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  background: #eee;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.module {
  width: 48%;
  min-height: 200px;
  background: white;
  position: relative;
  float: left;
  padding: 20px;
  margin-right: 4%;
  margin-bottom: 4%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) {
  margin-right: 0;
}

body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}

.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to {
    transform: translateY(0);
  }
}

JavaScript

(function($) { /**   * Copyright 2012, Digital Fusion   * Licensed under the MIT license.   * http://teamdf.com/jquery-plugins/license/   *   * @author Sam Sehnert   * @desc A small plugin that checks whether elements are within   *     the user visible viewport of a web browser.   *     only accounts for vertical position, not horizontal.   */
  $.fn.visible = function(partial) {
    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };
})(jQuery);
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible");
  }
});
win.scroll(function(event) {
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in");
    }
  });
});