JSFiddle - React, Tailwind, and code Playground

by bnson

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
  
  <div class="module"><img src="http://cutehdwall.com/wp-content/uploads/2015/01/beautiful-girl.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://heonho.com/wp-content/uploads/2014/11/beauty-girl-eyes-94121.jpeg" class="img-responsive" /></div>
  <div class="module"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2014/10/beautiful-girl-9.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://wallpaperbook.net/wp-content/uploads/2014/10/cute-and-beautiful-girls-wallpapers-058.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://wallpaperbook.net/wp-content/uploads/2014/10/black-hair-oriental-beauty-girl.jpg" class="img-responsive" /></div>
  <div class="module"><img src="https://www.todaybeam.com/wp-content/uploads/2014/07/Beautiful-Girl-1.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://www.skyhdwallpaper.com/wp-content/uploads/2014/10/Pretty-Girl.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://f9vision.com/wp-content/uploads/2014/02/Download-Beautiful-Girl-Wallpaper-Free-1024x640.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://bestpics.in/wp-content/uploads/2014/10/Beautiful-girl-Wallpapers.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://www.wallpaperbases.com/Beautiful-Girls-Wallpapers/images/Beautiful%20Girls%20Wallpaper%2012.jpg" class="img-responsive" /></div> 
  <div class="module"><img src="http://bestpics.in/wp-content/uploads/2014/10/beautiful-girl-hd.jpg" class="img-responsive" /></div>
  <div class="module"><img src="http://megasignals.net/wp-content/uploads/2014/05/beautiful-girls-wallpaper-hd-3.jpg" class="img-responsive" /></div>
  <div class="module"><img...

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;
  
  background-color:rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: 0px 0px 29px -7px rgba(0,0,0,0.65);
  -moz-box-shadow: 0px 0px 29px -7px rgba(0,0,0,0.65);
  box-shadow: 0px 0px 29px -7px rgba(0,0,0,0.65);    
  
}

.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(http://wallnoy.com/wp-content/uploads/2014/09/blurry_lights_background_7.jpg);
  background-size: cover;
  padding: 30px;
}

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

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

.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"); 
		} 
	  });
	  
	});