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

@import "compass/css3";

* {
  @include 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%;
  &:nth-child(even) {
    margin-right: 0;
  }
  box-shadow: 0 1px 3px rgba(black, 0.2);
  transform-origin: center center; 
  &.off-screen-top{
   transform: translateY(-150px); 
  }
  &.off-screen-bottom{
   transform: translateY(150px); 
  }
}

body {
  background: url(https://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}
 
.come-in {
  transform: translateY(0);
  transition: transform 0.8s ease-out;
}
.come-in:nth-child(odd) {
  transition-duration: 0.5s;
}
.already-visible {
  transform: translateY(0);
  transition: none;
}

	$.fn.offScreen = function(distance){
		
	    var $t				= $(this),
	    	$w				= $(window),
	    	viewTop			= $w.scrollTop(),
	    	viewBottom		= viewTop + $w.height(),
	    	_top			= $t.offset().top - distance,
	    	_bottom		= $t.offset().top + $t.height() + distance;
   
   return {
     top: _bottom <= viewTop,
     bottom: _top >= viewBottom
   }
	
};
    


var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (!el.offScreen(150).bottom) {
    el.addClass("already-visible"); 
  } 
});

win.on("scroll resize",function(event) 
{
  
  allMods.each(function(i, el) {
    var el = $(el);
    if (!el.offScreen(150).top && !el.offScreen(150).bottom) 
    {
      el.removeClass("already-visible off-screen-top off-screen-bottom"); 
      el.addClass("come-in"); 
    } 
    else
    {
    
        if(el.offScreen(150).top)
        {
            el.addClass("off-screen-top"); 
        }
        else
        {
            el.addClass("off-screen-bottom"); 
        }
    }
  });//allMods.each()
  
});//win.scroll()

win.trigger("scroll");