A Pen by seth kontny on CodePen.
Created
January 25, 2014 00:38
-
-
Save sethkontny/8609810 to your computer and use it in GitHub Desktop.
A Pen by seth kontny.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="column-container clearfix"> | |
<!-- col 1 --> | |
<div class="column"> | |
<div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
<div class="block block-2x block-mango" data-scrollreveal="enter right after 0.5s"></div> | |
<div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
<div class="block block-3x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
<div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> | |
<div class="block block-1x block-grape" data-scrollreveal="enter top"></div> | |
</div> | |
<!-- col 2 --> | |
<div class="column"> | |
<div class="block block-3x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
<div class="block block-1x block-orange" data-scrollreveal="enter left"></div> | |
<div class="block block-2x block-grape" data-scrollreveal="enter top"></div> | |
<div class="block block-1x block-orange" data-scrollreveal="enter left"></div> | |
<div class="block block-1x block-grape" data-scrollreveal="enter top"></div> | |
<div class="block block-2x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
</div> | |
<!-- col 3 --> | |
<div class="column"> | |
<div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> | |
<div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
<div class="block block-2x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
<div class="block block-1x block-mango" data-scrollreveal="enter right after 0.5s"></div> | |
<div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
<div class="block block-3x block-orange" data-scrollreveal="enter left"></div> | |
</div> | |
<!-- col 4 --> | |
<div class="column"> | |
<div class="block block-1x block-orange" data-scrollreveal="enter left"></div> | |
<div class="block block-2x block-grape" data-scrollreveal="enter top"></div> | |
<div class="block block-3x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> | |
<div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
<div class="block block-2x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
<div class="block block-1x block-mango" data-scrollreveal="enter right after 0.5s"></div> | |
</div> | |
<!-- col 5 --> | |
<div class="column"> | |
<div class="block block-3x block-mango" data-scrollreveal="enter right after 0.5s"></div> | |
<div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
<div class="block block-2x block-orange" data-scrollreveal="enter left"></div> | |
<div class="block block-1x block-grape" data-scrollreveal="enter top"></div> | |
<div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
<div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> | |
</div> | |
<!-- col 6 --> | |
<div class="column"> | |
<div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
<div class="block block-3x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
<div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
<div class="block block-3x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
<div class="block block-1x block-orange" data-scrollreveal="enter left"></div> | |
<div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
</div> | |
<!-- col 7 --> | |
<div class="column"> | |
<div class="block block-2x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
<div class="block block-1x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> | |
<div class="block block-1x block-mango" data-scrollreveal="enter right after 0.5s"></div> | |
<div class="block block-3x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> | |
<div class="block block-2x block-mango" data-scrollreveal="enter right after 0.5s"></div> | |
<div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
</div> | |
<!-- col 8 --> | |
<div class="column"> | |
<div class="block block-1x block-grape" data-scrollreveal="enter top"></div> | |
<div class="block block-2x block-orange" data-scrollreveal="enter left"></div> | |
<div class="block block-1x block-grape" data-scrollreveal="enter top"></div> | |
<div class="block block-3x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> | |
<div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> | |
<div class="block block-2x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
_ _ _____ _ _ | |
| | | __ \ | | (_) | |
___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ | |
/ __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __| | |
\__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \ | |
|___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ | |
_/ | | |
|__/ | |
"Declarative on-scroll reveal animations." | |
/*============================================================================= | |
scrollReveal.js is inspired by cbpScroller.js, © 2014, Codrops. | |
Licensed under the MIT license. | |
http://www.opensource.org/licenses/mit-license.php | |
scrollReveal.js, © 2014 https://twitter.com/julianlloyd | |
=============================================================================*/ | |
;(function (window) { | |
'use strict'; | |
var docElem = window.document.documentElement; | |
function getViewportH () { | |
var client = docElem['clientHeight'], | |
inner = window['innerHeight']; | |
return (client < inner) ? inner : client; | |
} | |
function getOffset (el) { | |
var offsetTop = 0, | |
offsetLeft = 0; | |
do { | |
if (!isNaN(el.offsetTop)) { | |
offsetTop += el.offsetTop; | |
} | |
if (!isNaN(el.offsetLeft)) { | |
offsetLeft += el.offsetLeft; | |
} | |
} while (el = el.offsetParent) | |
return { | |
top: offsetTop, | |
left: offsetLeft | |
} | |
} | |
function isElementInViewport (el, h) { | |
var scrolled = window.pageYOffset, | |
viewed = scrolled + getViewportH(), | |
elH = el.offsetHeight, | |
elTop = getOffset(el).top, | |
elBottom = elTop + elH, | |
h = h || 0; | |
return (elTop + elH * h) <= viewed && (elBottom) >= scrolled; | |
} | |
function extend (a, b) { | |
for (var key in b) { | |
if (b.hasOwnProperty(key)) { | |
a[key] = b[key]; | |
} | |
} | |
return a; | |
} | |
function scrollReveal(options) { | |
this.options = extend(this.defaults, options); | |
this._init(); | |
} | |
scrollReveal.prototype = { | |
defaults: { | |
axis: 'y', | |
distance: '25px', | |
duration: '0.66s', | |
delay: '0s', | |
// if 0, the element is considered in the viewport as soon as it enters | |
// if 1, the element is considered in the viewport when it's fully visible | |
viewportFactor: 0.33 | |
}, | |
/*=============================================================================*/ | |
_init: function () { | |
var self = this; | |
this.elems = Array.prototype.slice.call(docElem.querySelectorAll('[data-scrollReveal]')); | |
this.scrolled = false; | |
// Initialize all scrollreveals, triggering all | |
// reveals on visible elements. | |
this.elems.forEach(function (el, i) { | |
self.animate(el); | |
}); | |
var scrollHandler = function () { | |
if (!self.scrolled) { | |
self.scrolled = true; | |
setTimeout(function () { | |
self._scrollPage(); | |
}, 60); | |
} | |
}; | |
var resizeHandler = function () { | |
function delayed() { | |
self._scrollPage(); | |
self.resizeTimeout = null; | |
} | |
if (self.resizeTimeout) { | |
clearTimeout(self.resizeTimeout); | |
} | |
self.resizeTimeout = setTimeout(delayed, 200); | |
}; | |
window.addEventListener('scroll', scrollHandler, false); | |
window.addEventListener('resize', resizeHandler, false); | |
}, | |
/*=============================================================================*/ | |
_scrollPage: function () { | |
var self = this; | |
this.elems.forEach(function (el, i) { | |
if (isElementInViewport(el, self.options.viewportFactor)) { | |
self.animate(el); | |
} | |
}); | |
this.scrolled = false; | |
}, | |
/*=============================================================================*/ | |
parseLanguage: function (el) { | |
// Splits on a sequence of one or more commas, periods or spaces. | |
var words = el.getAttribute('data-scrollreveal').split(/[, ]+/), | |
enterFrom, | |
parsed = {}; | |
function filter (words) { | |
var ret = [], | |
blacklist = [ | |
"from", | |
"the", | |
"and", | |
"then", | |
"but" | |
]; | |
words.forEach(function (word, i) { | |
if (blacklist.indexOf(word) > -1) { | |
return; | |
} | |
ret.push(word); | |
}); | |
return ret; | |
} | |
words = filter(words); | |
words.forEach(function (word, i) { | |
switch (word) { | |
case "enter": | |
enterFrom = words[i + 1]; | |
if (enterFrom == "top" || enterFrom == "bottom") { | |
parsed.axis = "y"; | |
} | |
if (enterFrom == "left" || enterFrom == "right") { | |
parsed.axis = "x"; | |
} | |
return; | |
case "after": | |
parsed.delay = words[i + 1]; | |
return; | |
case "wait": | |
parsed.delay = words[i + 1]; | |
return; | |
case "move": | |
parsed.distance = words[i + 1]; | |
return; | |
case "over": | |
parsed.duration = words[i + 1]; | |
return; | |
case "trigger": | |
parsed.eventName = words[i + 1]; | |
return; | |
default: | |
// Unrecognizable words; do nothing. | |
return; | |
} | |
}); | |
// After all values are parsed, let’s make sure our our | |
// pixel distance is negative for top and left entrances. | |
// | |
// ie. "move 25px from top" starts at 'top: -25px' in CSS. | |
if (enterFrom == "top" || enterFrom == "left") { | |
if (!typeof parsed.distance == "undefined") { | |
parsed.distance = "-" + parsed.distance; | |
} | |
else { | |
parsed.distance = "-" + this.options.distance; | |
} | |
} | |
return parsed; | |
}, | |
/*=============================================================================*/ | |
genCSS: function (el, axis) { | |
var parsed = this.parseLanguage(el); | |
var dist = parsed.distance || this.options.distance, | |
dur = parsed.duration || this.options.duration, | |
delay = parsed.delay || this.options.delay, | |
axis = parsed.axis || this.options.axis; | |
var transition = "-webkit-transition: all " + dur + " ease " + delay + ";" + | |
"-moz-transition: all " + dur + " ease " + delay + ";" + | |
"-o-transition: all " + dur + " ease " + delay + ";" + | |
"transition: all " + dur + " ease " + delay + ";"; | |
var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + | |
"-moz-transform: translate" + axis + "(" + dist + ");" + | |
"transform: translate" + axis + "(" + dist + ");" + | |
"opacity: 0;"; | |
var target = "-webkit-transform: translate" + axis + "(0);" + | |
"-moz-transform: translate" + axis + "(0);" + | |
"transform: translate" + axis + "(0);" + | |
"opacity: 1;"; | |
return { | |
transition: transition, | |
initial: initial, | |
target: target, | |
totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) | |
}; | |
}, | |
/*=============================================================================*/ | |
animate: function (el) { | |
var css = this.genCSS(el); | |
if (!el.getAttribute('data-sr-init')) { | |
el.setAttribute('style', css.initial); | |
el.setAttribute('data-sr-init', true); | |
} | |
if (el.getAttribute('data-sr-complete')) { | |
return; | |
} | |
if (isElementInViewport(el, this.options.viewportFactor)) { | |
el.setAttribute('style', css.target + css.transition); | |
setTimeout(function () { | |
el.removeAttribute('style'); | |
el.setAttribute('data-sr-complete', true); | |
}, css.totalDuration); | |
} | |
} | |
}; // end scrollReveal.prototype | |
document.addEventListener("DOMContentLoaded", function (evt) { | |
window.scrollReveal = new scrollReveal(); | |
}); | |
})(window); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
a { | |
cursor: pointer; | |
} | |
* { | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html { | |
overflow: -moz-scrollbars-vertical; | |
overflow-y: scroll; | |
} | |
h1, .h1 { | |
font-family: "proxima-nova", sams-serif; | |
font-weight: 100; | |
} | |
html, body { | |
font-family: "proxima-nova", sans-serif; | |
font-weight: 300; | |
} | |
.clearfix:before, | |
.clearfix:after { | |
content: " "; | |
display: table; | |
} | |
.clearfix:after { | |
clear: both; | |
} | |
html, body { | |
color: white; | |
text-align: center; | |
} | |
@media screen and (min-width: 300px) { | |
html, body { | |
font-size: 14px; | |
} | |
} | |
@media screen and (min-width: 460px) { | |
html, body { | |
font-size: 20px; | |
} | |
} | |
@media screen and (min-width: 900px) { | |
html, body { | |
font-size: 24px; | |
} | |
} | |
h1, .h1 { | |
line-height: 1.166; | |
margin: 0.66em 0; | |
} | |
@media screen and (min-width: 300px) { | |
h1, .h1 { | |
font-size: 2.33em; | |
} | |
} | |
@media screen and (min-width: 460px) { | |
h1, .h1 { | |
font-size: 2.66em; | |
} | |
} | |
@media screen and (min-width: 720px) { | |
h1, .h1 { | |
font-size: 3.33em; | |
} | |
} | |
p { | |
color: #616c84; | |
margin: 0.33em 0; | |
} | |
a:link, | |
a:visited { | |
color: #35ff99; | |
text-decoration: none; | |
border-radius: 5px; | |
padding: 2px; | |
} | |
a:hover, | |
a:active { | |
background: #35ff99; | |
color: #202a39; | |
} | |
small { | |
font-size: .75em; | |
} | |
em { | |
font-style: italic; | |
} | |
.text-left { | |
text-align: left; | |
} | |
.text-right { | |
text-align: right; | |
} | |
.text-center { | |
text-align: center; | |
} | |
html, body { | |
height: 100%; | |
background: #202a39; | |
} | |
.column-container { | |
width: 80%; | |
max-width: 1000px; | |
margin: 0 auto; | |
height: 250%; | |
text-align: center; | |
} | |
@media screen and (min-width: 300px) { | |
.column-container { | |
padding-top: 20%; | |
margin-bottom: -125px; | |
} | |
} | |
@media screen and (min-width: 720px) { | |
.column-container { | |
padding-top: 10%; | |
} | |
} | |
.column { | |
width: 3%; | |
height: 100%; | |
margin: 0 2%; | |
display: inline-block; | |
} | |
.block { | |
border-radius: 5px; | |
margin-bottom: 150%; | |
} | |
.block-1x { | |
height: 10%; | |
} | |
.block-2x { | |
height: 15%; | |
} | |
.block-3x { | |
height: 20%; | |
} | |
.block-blueberry { | |
background: #008597; | |
} | |
.block-slate { | |
background: #2d3443; | |
} | |
.block-grape { | |
background: #4d407c; | |
} | |
.block-raspberry { | |
background: #ff005d; | |
} | |
.block-mango { | |
background: #ffcc00; | |
} | |
.block-orange { | |
background: #ff7c35; | |
} | |
.block-kiwi { | |
background: #35ff99; | |
} | |
.withLove { | |
overflow: hidden; | |
text-align: center; | |
padding-bottom: 2em; | |
cursor: default; | |
color: #616c84; | |
} | |
@media screen and (min-width: 900px) { | |
.withLove { | |
margin-top: 125px; | |
} | |
} | |
.withLove * { | |
display: inline-block; | |
} | |
.withLove .alpha, | |
.withLove .omega { | |
width: 40%; | |
} | |
.withLove .alpha { | |
text-align: right; | |
} | |
.withLove .omega { | |
text-align: left; | |
} | |
.withLove .heart { | |
margin: 0 -2px; | |
position: relative; | |
z-index: 3; | |
-webkit-animation: throb 1.33s ease-in-out infinite; | |
animation: throb 1.33s ease-in-out infinite; | |
} | |
.withLove .heart path { | |
fill: #ff005d; | |
} | |
@media screen and (min-width: 300px) { | |
.withLove .heart { | |
width: 30px; | |
height: 30px; | |
top: .66em; | |
} | |
} | |
@media screen and (min-width: 460px) { | |
.withLove .heart { | |
top: .8em; | |
width: 50px; | |
height: 50px; | |
} | |
} | |
@-webkit-keyframes throb { | |
0% { | |
-webkit-transform: scale(1); | |
} | |
50% { | |
-webkit-transform: scale(0.8); | |
} | |
100% { | |
-webkit-transform: scale(1); | |
} | |
} | |
@keyframes throb { | |
0% { | |
transform: scale(1); | |
} | |
50% { | |
transform: scale(0.8); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment