Page-Scroll-Content-Animation

index.html

	<div class="main-content">
	  <div class="header">
	    <h1 class="big-title">Big Title</h1>
	    <p class="header-text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.</p>
	  </div>
	  <div class="row">
	    <h2>Three Things</h2>
	    <div class="one-third third">
	      <h3>1st Thing</h3>
	      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at penatibus. Donec ullamcorper nulla non metus auctor fringilla.</p>
	    </div>
	    <div class="two-third third">
	      <h3>2nd Thing</h3>
	      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis purus sit amet fermentum.</p>
	    </div>
	    <div class="three-third third">
	      <h3>3rd Thing</h3>
	      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus. Donec ullamcorper metus auctor fringilla.</p>
	     </div>
	  </div>
	  <div class="row">
	    <h2>Three More Things</h2>
	    <div class="one-third third">
	      <h3>1st Thing</h3>
	      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at penatibus. Donec ullamcorper nulla non metus auctor fringilla.</p>
	    </div>
	    <div class="two-third third">
	      <h3>2nd Thing</h3>
	      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis purus sit amet fermentum.</p>
	    </div>
	    <div class="three-third third">
	      <h3>3rd Thing</h3>
	      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper metus auctor fringilla.</p>
	     </div>
	  </div>
	  <div class="row">
	    <h2>Three More More Things</h2>
	    <div class="one-third third">
	      <h3>1st Thing</h3>
	      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at penatibus. Donec ullamcorper nulla non metus auctor fringilla.</p>
	    </div>
	    <div class="two-third third">
	      <h3>2nd Thing</h3>
	      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis purus sit amet fermentum.</p>
	    </div>
	    <div class="three-third third">
	      <h3>3rd Thing</h3>
	      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper metus auctor fringilla.</p>
	     </div>
	  </div>
	  <div class="row">
	    <h2>Three Even More Things</h2>
	    <div class="one-third third">
	      <h3>1st Thing</h3>
	      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at penatibus. Donec ullamcorper nulla non metus auctor fringilla.</p>
	    </div>
	    <div class="two-third third">
	      <h3>2nd Thing</h3>
	      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis purus sit amet fermentum.</p>
	    </div>
	    <div class="three-third third">
	      <h3>3rd Thing</h3>
	      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper metus auctor fringilla.</p>
	     </div>
	  </div>
	</div>

Page-Scroll-Content-Animation.markdown

Page Scroll Content Animation

Animating the appearance of the grid items in each row - jQuery triggers change in position - sliding grid items into position. [UNDER CONSTRUCTION]

A Pen by Nick LaDart on CodePen.

License.

script.js

			$(document).ready(function() {
			  var thing1 = $('.one-third'),
			    thing2 = $('.two-third'),
			    thing3 = $('.three-third'),
			    row = $('.row'),
			  	pageHeight = $(window).height();
			  $(thing1,thing2,thing3).addClass('offscreen');
			  $(window).scroll(function() {
			  	var scrollDistance = $(this).scrollTop();
			    $.each(row, function() {
			      var rowScroll = $(this).offset().top - pageHeight*.7;
	 			  if( scrollDistance > rowScroll ) {
		 			$(this).children('.third').removeClass('offscreen');
		 		  } else {
		 		    $(this).children('.third').addClass('offscreen');
		 		  };
	 			});
			   });
			 });

style.css

body {
  background: #16a085;
  overflow-x: hidden;
  margin-bottom: 15em;
}
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.main-content {
  font-family: Open Sans, Neue Helvetica, Helvetica Neue, sans-serif;
  width: 90%;
  margin: 0 auto; 
  color: #fff;
}
h1, h2 {
  text-shadow: 0 1px 2px #2c3e50;
}
.big-title {
  font-size: 6em;
  margin: 2em 0 1em;
  text-align: center;
  text-transform: uppercase;
}
.header-text {
  font-size: 2em;
  font-weight: 100;
  text-align: center;
}
.header,
.row {
  width: 100%;
  clear: both;
  padding: 2em 0;
  position: relative;
  min-height: 25em;
}
.header {
  margin-bottom: 12em;
}
.third {
  width: 30.3%;
  margin: 0 1.5%;
  position: absolute;
  top: 8em;
  padding: 1em;
  background: #fff;
  box-shadow: 0 2px 2px 0 #2c3e50;
  color: #2c3e50;
  min-height: 15em;
  opacity: 1;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.one-third {
	left: 0;
}
.two-third {
	left: 33%;
}
.three-third {
	left: 66%;
}
.offscreen {
	opacity: 0;
}
.one-third.offscreen {
	left: -50%;
}
.two-third.offscreen {
	top: 600px;
}
.three-third.offscreen {
	left: 133%;
}