JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="layout-banners">
  <div class="mod-parallax-banner mod-parallax-banner-one" data-speed="8" data-type="background">
    
  </div>
   <div class="mod-parallax-banner mod-parallax-banner-two" data-speed="8" data-type="background">
    
  </div>
   <div class="mod-parallax-banner mod-parallax-banner-three" data-speed="8" data-type="background">
    
  </div>
   <div class="mod-parallax-banner mod-parallax-banner-four" data-speed="8" data-type="background">
   
  </div>
   <div class="mod-parallax-banner mod-parallax-banner-five" data-speed="8" data-type="background">
    
  </div>
</div>

<div style="margin-bottom:500px; background-color:#ddd;" ></div>

CSS

.layout-banners{
  background-color:yellow;
  min-width:950px;
  margin:0 auto;
}

.layout-constrained{
  width:950px;
  margin:0 auto;
}

.mod-parallax-banner{
  height: 1005px; 
  padding: 0;
  margin: 0;
  position: relative; 
  background-position:50% 0;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-color:transparent;
}

.mod-parallax-banner-one{
    background-image: url(http://dl.dropbox.com/u/1398656/banner-parallax-1.jpg);

}
.mod-parallax-banner-two{
    background-image: url(http://dl.dropbox.com/u/1398656/banner-parallax-2.jpg);
}

.mod-parallax-banner-three{
    background-image: url(http://dl.dropbox.com/u/1398656/banner-parallax-3.jpg);
}

.mod-parallax-banner-four{
    background-image: url(http://dl.dropbox.com/u/1398656/banner-parallax-4.jpg);
}

.mod-parallax-banner-five{
    background-image: url(http://dl.dropbox.com/u/1398656/banner-parallax-5.jpg);
}

JavaScript

$(function(){
						
	// Cache the Window object
	$window = $(window);
	
	// Cache the Y offset and the speed of each sprite
	$('[data-type]').each(function() {	
		$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
		$(this).data('Xposition', $(this).attr('data-Xposition'));
		$(this).data('speed', $(this).attr('data-speed'));
	});
	
	// For each element that has a data-type attribute
	$('div[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);
					
					//...