Skip to content

Instantly share code, notes, and snippets.

@texxs
Created April 14, 2016 15:12
Show Gist options
  • Save texxs/daf234567de44e3d89cc5ac2924ef37c to your computer and use it in GitHub Desktop.
Save texxs/daf234567de44e3d89cc5ac2924ef37c to your computer and use it in GitHub Desktop.
JS for parallax effect. add data-type="background" and data-speed-"x" to any <section> that has a backgound image to make this work.
$(function() {
// Cache the Window object
var $window = $(window);
// Parallax Backgrounds
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
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 });
}); // end window scroll
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment