Skip to content

Instantly share code, notes, and snippets.

@phoopee3
Created March 18, 2015 19:43
Show Gist options
  • Save phoopee3/b979e786929efe8ba860 to your computer and use it in GitHub Desktop.
Save phoopee3/b979e786929efe8ba860 to your computer and use it in GitHub Desktop.
Parallax scroll and fade text on scroll
/**
* from http://paper-leaf.com/blog/2015/02/march-2015-desktop-calendar-wallpaper/
* Can't find original source
**/
/**
* Created by Sallar Kaboli <sallar.kaboli@gmail.com>
* @sallar
*
* Released under the MIT License.
* http://sallar.mit-license.org/
*
* This document demonstrates three things:
*
* - Creating a simple parallax effect on the content
* - Creating a Medium.com-style blur on scroll image
* - Getting scroll position using requestAnimationFrame for better performance
*/
/**
* Cache
*/
var $content = $('.hero-content, .hero-paragraph')
, $blur = $('.hero-wash')
, 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 * 1.5;
$content.css({
'transform' : 'translateY(-' + slowScroll + 'px)',
'-moz-transform' : 'translateY(-' + slowScroll + 'px)',
'-webkit-transform' : 'translateY(-' + slowScroll + 'px)'
});
$blur.css({
'opacity' : (blurScroll / wHeight) * 0.70
});
}
};
/**
* Attach!
*/
var scroller = new Scroller();
scroller.init();
/** Scroll opacity **/
var divs = $('.hero-content, .hero-paragraph');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({
'opacity' : 1 - st/250
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment