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.
<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> |
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.
$(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%; | |
} |