Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blur on Scroll + Simple Parallax
<header>
<div class="content">
<hgroup>
<h1>ultratravel</h1>
<p><strong>Cast your vote for the first U.S. ULTRAs!</strong><br>
This Fall, Ultratravel presents the first-ever Ultimate Luxury Travel Related Awards in New York. We want to know what you think, so please review the categories below and tell us who deserves to win. </p>
</hgroup>
</div>
<div class="overlay"></div>
</header>
<section class="site">
This is a placeholder for the form.
</section>
/**
* Cache
*/
var $content = $('header .content')
, $blur = $('header .overlay')
, wHeight = $(window).height();
$(window).on('resize', function(){
wHeight = $(window).height();
});
/**
* requestAnimationFrame Shim
*/
window.requestAnimFrame = (function()
{
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
/**
* Scroller
*/
function Scroller()
{
this.latestKnownScrollY = 0;
this.ticking = false;
}
Scroller.prototype = {
/**
* Initialize
*/
init: function() {
window.addEventListener('scroll', this.onScroll.bind(this), false);
},
/**
* Capture Scroll
*/
onScroll: function() {
this.latestKnownScrollY = window.scrollY;
this.requestTick();
},
/**
* Request a Tick
*/
requestTick: function() {
if( !this.ticking ) {
window.requestAnimFrame(this.update.bind(this));
}
this.ticking = true;
},
/**
* Update.
*/
update: function() {
var currentScrollY = this.latestKnownScrollY;
this.ticking = false;
/**
* Do The Dirty Work Here
*/
var slowScroll = currentScrollY / 4
, blurScroll = currentScrollY * 2;
$content.css({
'transform' : 'translateY(-' + slowScroll + 'px)',
'-moz-transform' : 'translateY(-' + slowScroll + 'px)',
'-webkit-transform' : 'translateY(-' + slowScroll + 'px)'
});
$blur.css({
'opacity' : blurScroll / wHeight
});
}
};
/**
* Attach!
*/
var scroller = new Scroller();
scroller.init();
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "bourbon";
html, body{
padding: 0;
margin: 0;
height: 100%;
}
html{
font: 1em/1.5 "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
}
body{
font-size: 1.3em;
background: url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg.jpg) center no-repeat fixed;
background-size: cover;
}
header{
height: 100%;
position: relative;
overflow: hidden;
background: url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg.jpg) center no-repeat fixed; /* Image Credit: Unsplash.me */
background-size: cover;
.content{
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
}
h1, h2{
margin: 0;
font-weight: 100;
font-size: 4em;
}
h2{
text-transform: uppercase;
margin-top: -.5em;
}
hgroup{
@include transform(translate(-50%, -50%));
display: inline-block;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color: #fff;
/* border: 5px solid #fff; */
padding: .5em 3em;
/* background-color: rgba(0,0,0,.2); */
z-index: 2;
}
.overlay{
position: fixed;
top: 0; right: 0; left: 0; bottom: 0;
background: url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg-blurred.jpg) center no-repeat fixed;
background-size: cover;
z-index: -1;
opacity: 0;
}
}
.site{
padding: 20em 0;
text-align: center;
background: transparent;
font-size: .8em;
color: #444;
a{
color: #666;
text-decoration: none;
&:hover{
color: #222;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.