Skip to content

Instantly share code, notes, and snippets.

@najamsk
Created February 26, 2015 04:33
Show Gist options
  • Save najamsk/a2daaadf047e68be1ae3 to your computer and use it in GitHub Desktop.
Save najamsk/a2daaadf047e68be1ae3 to your computer and use it in GitHub Desktop.
nike better world parallex effect
//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