<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mprestonise/pen/dPRLWR?depth=everything&limit=all&order=popularity&page=3&q=parallax&show_forks=false" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lobster);
html, body {width: 100%}
* {box-sizing: border-box}
body {padding: 0; font-family: lobster, arial, sans-serif}
.hero {position: relative; text-align: center}
.hero-content {display: block; position: relative; z-index: 9999}
.parallax {
display: block;
text-align: center;
padding: 10em 1em;
color: white; overflow: hidden
}
.parallax h1 {font-size: 4em; text-shadow: 1px 1px 2px black; margin-bottom: 15px}
.parallax p {font-family: arial, sans-serif; font-size: 1em; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; color: black; text-shadow: 0 1px 0 rgba(255,255,255,0.75)}
.nyc {background: url(http://prestonise.com/images/nyc.jpg) no-repeat center center}
.madrid {background: url(http://prestonise.com/images/madrid.jpg) no-repeat center center}
.paris {background: url(http://prestonise.com/images/paris.jpg) no-repeat center center}
.spacer {display: block; color: #333; font-family: arial, sans-serif; padding: 3em 0}
.spacer h3 {font-family: lobster, sans-serif; font-size: 2em; margin-bottom: 15px}
.spacer p {font-size: 15px; line-height: 22px; margin-bottom: 15px}
button {border: 1px solid #aaa; padding: 0.75em 1.5em; border-radius: 4px; background: none; font-size: 1.25em; color: #555; display: inline-block; margin-right: -5px; vertical-align: top}
button:hover {background: #00ace9; color: white; border-color: #00ace9; cursor: pointer}
button.danger {margin-left: 25px; background: #d30; color: white; border-color: #d30}
button.danger:hover {background: #a00; border-color: #a00}
.container {max-width: 960px; margin: 0 auto; width: 95%}
.centered {text-align: center; padding-bottom: 3.75em}
.cleft-wrapper {
position: relative;
top: -1.25rem;
margin-bottom: -1.25rem;
left: 0;
width: 100%;
height: 1.25rem;
overflow: hidden;
}
.cleft-left, .cleft-right {
width: 50%;
height: 1.25rem;
background-color: #fff;
position: absolute;
top: 0;
}
.cleft-left {
left: -1.5rem;
}
.cleft-right {
right: -1.5rem;
}
.cleft-left:before, .cleft-right:before {
content: ' ';
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.cleft-left:before {
right: -1.5rem;
border-width: 1.25rem 0 0 1.5rem;
border-color: transparent transparent transparent #fff;
}
.cleft-right:before {
left: -1.5rem;
border-width: 1.25rem 1.5rem 0 0;
border-color: transparent #fff transparent transparent;
}
.carrotBox {position: relative}
.carrot {
display: block;
height: 0;
width: 0;
border-top: 1.25rem solid #fff;
border-right: 1.5rem solid transparent;
border-left: 1.5rem solid transparent;
position: absolute;
left: 50%;
margin-left: -1.5rem;
bottom: -1.25rem;
}</style></head><body>
<div class="parallax nyc hero" data-parallax-speed="1">
<div class="hero-content">
<h1>Hello World</h1>
<p>This is parallax element one</p>
</div>
</div>
<div class="cleft-wrapper">
<div class="cleft-left"></div>
<div class="cleft-right"></div>
</div>
<div class="spacer">
<div class="container">
<h3>Placeholder as Content?</h3>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Maecenas id enim convallis, gravida nisi vitae, pellentesque quam. Curabitur vel scelerisque elit. Curabitur consectetur diam id ullamcorper rutrum. Donec porttitor aliquam arcu, ac dapibus arcu scelerisque id. Nulla eu augue sed nisl hendrerit tristique eu vitae libero. Sed ipsum justo, cursus sit amet lectus nec, convallis rutrum nibh. Aenean eget felis quis mauris egestas placerat ut sit amet leo. Aenean sagittis condimentum lectus. Pellentesque et nunc sapien. Praesent hendrerit dictum augue sed rutrum. Donec molestie eros massa, ac congue nisl mattis non. Cras non rhoncus ante. Curabitur feugiat ac risus non ullamcorper. Morbi rutrum mollis neque eu feugiat. Fusce tempus commodo venenatis. Morbi aliquet nunc at imperdiet cursus.</p>
<p>Donec in mollis nisl, vel pharetra sem. Proin faucibus, nisl vel tristique feugiat, dolor sem ullamcorper libero, efficitur varius lacus augue a sem. Curabitur et lobortis erat. Donec ac mollis nulla, eu blandit turpis. Nunc arcu nunc, accumsan id cursus a, gravida ac justo. In hac habitasse platea dictumst. Aenean aliquet velit vel commodo varius. Donec nulla nunc, rutrum ultricies lacinia non, ornare vitae justo. Morbi porttitor dui ac faucibus posuere. Suspendisse ipsum purus, consequat non finibus ut, vestibulum quis nisl.</p>
</div>
</div>
<div class="carrotBox">
<div class="carrot"></div>
</div>
<div class="parallax paris" data-parallax-speed="0.75">
<div class="parallax-content">
<h1>Bonjour, Paris</h1>
<p>This is parallax element two.</p>
</div>
</div>
<div class="cleft-wrapper">
<div class="cleft-left"></div>
<div class="cleft-right"></div>
</div>
<div class="spacer tallSpacer">
<div class="container">
<h3>Placeholder as Content?</h3>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Maecenas id enim convallis, gravida nisi vitae, pellentesque quam. Curabitur vel scelerisque elit. Curabitur consectetur diam id ullamcorper rutrum. Donec porttitor aliquam arcu, ac dapibus arcu scelerisque id. Nulla eu augue sed nisl hendrerit tristique eu vitae libero. Sed ipsum justo, cursus sit amet lectus nec, convallis rutrum nibh. Aenean eget felis quis mauris egestas placerat ut sit amet leo. Aenean sagittis condimentum lectus. Pellentesque et nunc sapien. Praesent hendrerit dictum augue sed rutrum. Donec molestie eros massa, ac congue nisl mattis non. Cras non rhoncus ante. Curabitur feugiat ac risus non ullamcorper. Morbi rutrum mollis neque eu feugiat. Fusce tempus commodo venenatis. Morbi aliquet nunc at imperdiet cursus.</p>
<p>Donec in mollis nisl, vel pharetra sem. Proin faucibus, nisl vel tristique feugiat, dolor sem ullamcorper libero, efficitur varius lacus augue a sem. Curabitur et lobortis erat. Donec ac mollis nulla, eu blandit turpis. Nunc arcu nunc, accumsan id cursus a, gravida ac justo. In hac habitasse platea dictumst. Aenean aliquet velit vel commodo varius. Donec nulla nunc, rutrum ultricies lacinia non, ornare vitae justo. Morbi porttitor dui ac faucibus posuere. Suspendisse ipsum purus, consequat non finibus ut, vestibulum quis nisl.</p>
<p>Donec eget risus turpis. Curabitur sit amet sodales sem, non pharetra nisl. Aliquam vel purus urna. Proin id aliquet justo. Aenean at consequat lorem. Sed id felis at mauris aliquet efficitur eu vel turpis. Integer dignissim turpis ultrices elit tristique porta. Etiam finibus rhoncus fermentum. Proin vestibulum ante lacus, id consectetur urna vehicula ac. Integer gravida, dui venenatis feugiat iaculis, mauris nulla rhoncus sapien, non mollis velit felis bibendum eros. Donec eu ornare ex. Mauris aliquam mauris et lectus gravida, in imperdiet erat porta. Ut eu pellentesque metus.</p>
<p>Praesent vel sem quis magna imperdiet porta eu in justo. Quisque ultrices lacinia erat, vel ultricies risus auctor eget. Duis tempus ultricies magna in volutpat. Aenean auctor posuere risus, vitae lobortis enim tincidunt non. Quisque vitae justo sit amet orci venenatis pharetra. Curabitur vitae lacus a lacus tristique fermentum. Aliquam varius mi libero, ac aliquam velit tempus a. Phasellus mattis ligula nec purus pellentesque ullamcorper. Donec vel commodo elit. Fusce sit amet vulputate elit. Cras rutrum sagittis nibh eget interdum. Sed eu nunc eu massa maximus malesuada ut ac magna. Vestibulum fermentum urna et tincidunt efficitur. Sed at finibus nisi, aliquet sollicitudin urna. In sit amet eros fringilla, dapibus est vel, ultrices lacus.</p>
</div>
</div>
<div class="carrotBox">
<div class="carrot"></div>
</div>
<div class="parallax madrid" data-parallax-speed="0.25">
<div class="parallax-content">
<h1>Hola, Madrid</h1>
<p>This is parallax element three</p>
</div>
</div>
<div class="cleft-wrapper">
<div class="cleft-left"></div>
<div class="cleft-right"></div>
</div>
<div class="spacer centered">
<button>Call to Action »</button>
<button class="danger">There's Danger!</button>
</div>
<div class="carrotBox">
<div class="carrot"></div>
</div>
<div class="parallax nyc" data-parallax-speed="0.5">
<div class="parallax-content">
<h1>Goodbye</h1>
<p>This is the last parallax element</p>
</div>
</div>
<div class="cleft-wrapper">
<div class="cleft-left"></div>
<div class="cleft-right"></div>
</div>
<div class="spacer">
<div class="container">
<h3>Is this the end?</h3>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
<p>Mauris condimentum porttitor massa molestie elementum. Proin rhoncus, arcu sit amet molestie dignissim, sapien risus mattis arcu, et fringilla ipsum purus vitae neque. Phasellus ultricies dolor libero, at efficitur nulla tincidunt eget. Donec eget mauris nec libero vestibulum porta. Aenean sit amet turpis vehicula, vestibulum nunc sed, dapibus ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lobortis tincidunt iaculis. Aenean et odio eros. Aenean fermentum mi ac maximus sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam posuere, est id varius posuere, dolor nisi interdum ante, eget consequat ante mi non ex. Mauris bibendum ac diam vitae efficitur.</p>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function() {
var wHeight = $(window).height();
function parallax() {
var pHeight = $(this).outerHeight();
var pMiddle = pHeight / 2;
var wMiddle = wHeight / 2;
var fromTop = $(this).offset().top;
var scrolled = $(window).scrollTop();
var speed = $(this).attr('data-parallax-speed');
var rangeA = (fromTop - wHeight);
var rangeB = (fromTop + pHeight);
var rangeC = (fromTop - wHeight);
var rangeD = (pMiddle + fromTop) - (wMiddle + (wMiddle / 2));
if (rangeA < 0) {
rangeA = 0;
rangeB = wHeight
}
var percent = (scrolled - rangeA) / (rangeB - rangeA);
percent = percent * 100;
percent = percent * speed;
percent = percent.toFixed(2);
var animFromBottom = (scrolled - rangeC) / (rangeD - rangeC);
animFromBottom = animFromBottom.toFixed(2);
if (animFromBottom >= 1) {
animFromBottom = 1;
}
$(this).css('background-position', 'center ' + percent + '%');
$(this).find('.parallax-content').css('opacity', animFromBottom);
$(this).find('.parallax-content').css('transform', 'scale(' + animFromBottom + ')');
}
$('.parallax').each(parallax);
$(window).scroll(function(e) {
$('.parallax').each(parallax);
});
});
//# sourceURL=pen.js
</script>
</body></html>
