Created
February 26, 2015 04:33
-
-
Save najamsk/a2daaadf047e68be1ae3 to your computer and use it in GitHub Desktop.
nike better world parallex effect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//http://www.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/ | |
$('section[data-type="background"]').each(function(){ | |
// Store some variables based on where we are | |
var $self = $(this), | |
offsetCoords = $self.offset(), | |
topOffset = offsetCoords.top; | |
// When the window is scrolled... | |
$(window).scroll(function() { | |
// If this section is in view | |
if ( ($window.scrollTop() + $window.height()) > (topOffset) && | |
( (topOffset + $self.height()) > $window.scrollTop() ) ) { | |
// Scroll the background at var speed | |
// the yPos is a negative value because we're scrolling it UP! | |
var yPos = -($window.scrollTop() / $self.data('speed')); | |
// If this element has a Y offset then add it on | |
if ($self.data('offsetY')) { | |
yPos += $self.data('offsetY'); | |
} | |
// Put together our final background position | |
var coords = '50% '+ yPos + 'px'; | |
// Move the background | |
$self.css({ backgroundPosition: coords }); | |
// Check for other sprites in this section | |
$('[data-type="sprite"]', $self).each(function() { | |
// Cache the sprite | |
var $sprite = $(this); | |
// Use the same calculation to work out how far to scroll the sprite | |
var yPos = -($window.scrollTop() / $sprite.data('speed')); | |
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px'; | |
$sprite.css({ backgroundPosition: coords }); | |
}); // sprites | |
// Check for any Videos that need scrolling | |
$('[data-type="video"]', $self).each(function() { | |
// Cache the video | |
var $video = $(this); | |
// There's some repetition going on here, so | |
// feel free to tidy this section up. | |
var yPos = -($window.scrollTop() / $video.data('speed')); | |
var coords = (yPos + $video.data('offsetY')) + 'px'; | |
$video.css({ top: coords }); | |
}); // video | |
}; // in view | |
}); // window scroll | |
}); // each data-type |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment