Skip to content

Instantly share code, notes, and snippets.

@nladart
Created September 6, 2013 07:39
Show Gist options
  • Save nladart/6460704 to your computer and use it in GitHub Desktop.
Save nladart/6460704 to your computer and use it in GitHub Desktop.
Page-Scroll-Content-Animation
<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

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.

$(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');
};
});
});
});
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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment