Skip to content

Instantly share code, notes, and snippets.

@chadclark
Created June 19, 2013 20:20
Show Gist options
  • Save chadclark/5817682 to your computer and use it in GitHub Desktop.
Save chadclark/5817682 to your computer and use it in GitHub Desktop.
<section data-type="background" data-speed="10">
</section>
section {
background: url(path/to/background) 0 0 repeat fixed;
}
$(document).ready(function() {
// $$$$$$$\ $$\ $$\ $$\ $$\
// $$ __$$\ $$ |$$ | \__| $ |
// $$ | $$ |$$$$$$\ $$$$$$\ $$$$$$\ $$ |$$ | $$$$$$\ $$\ $$\ $$\ $$$$$$$\\_/
// $$$$$$$ |\____$$\ $$ __$$\ \____$$\ $$ |$$ | \____$$\ \$$\ $$ |$$ |$$ __$$\
// $$ ____/ $$$$$$$ |$$ | \__|$$$$$$$ |$$ |$$ | $$$$$$$ | \$$$$ / $$ |$$ | $$ |
// $$ | $$ __$$ |$$ | $$ __$$ |$$ |$$ |$$ __$$ | $$ $$< $$ |$$ | $$ |
// $$ | \$$$$$$$ |$$ | \$$$$$$$ |$$ |$$ |\$$$$$$$ |$$ /\$$\ $$ |$$ | $$ |
// \__| \_______|\__| \_______|\__|\__| \_______|\__/ \__|\__|\__| \__|
//
//
//
var $window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment