How to Integrate Simple Parallax with Twitter Bootstrap

Thanks to the flexibility of Twitter Bootstrap, you’re not in any way limited only to the framework’s default container and grid styles. It can actually be quite easy to introduce new layout options to your site without needing to worry about disrupting Bootstrap’s functionality. With this tutorial, we’ll learn how to do that by integrating a simple scrolling parallax effect to the page.

---

View Demo | Download Source Files

---

What makes parallax work visually is a difference in scrolling speeds between elements. To start off, we’ll take advantage of HTML5’s section tag + data attribute to easily distinguish what should be affected from a syntax perspective.

<!-- Section 1 -->
<section id="intro" data-speed="6" data-type="background">
	<div class="container">
		Content goes here!
    </div>
</section>
<!-- Section 2 -->
<section id="home" data-speed="4" data-type="background">
	<div class="container">
		More content goes here!
    </div>
</section>
<!-- Section 3 -->
<section id="about" data-speed="2" data-type="background">
	<div class="container">
		This is the final section!
    </div>
</section>

CSS will be used to define the 3 sections’ dimensions and placement. I preferred to set an automatic height and a top/bottom padding of 100px. This ensures the sections will resize to accomodate any changes in content length. Note the fixed backgrounds, as well. You’ll want to use images that either tile or are large enough fill a section’s background as it scrolls.

#intro { 
	background: url(images/intro.png) 50% 0 fixed; 
	height: auto;  
	margin: 0 auto; 
	width: 100%; 
	position: relative; 
	box-shadow: 0 0 50px rgba(0,0,0,0.8);
	padding: 100px 0;
}
#home { 
	background: url(images/home.jpg) 50% 0 fixed; 
	height: auto;  
	margin: 0 auto; 
	width: 100%; 
	position: relative; 
	box-shadow: 0 0 50px rgba(0,0,0,0.8);
	padding: 200px 0;
}
#about { 
	background: url(images/about.png) 50% 0 fixed; 
	height: auto;
	margin: 0 auto; 
	width: 100%; 
	position: relative; 
	box-shadow: 0 0 50px rgba(0,0,0,0.8);
	padding: 100px 0;
	color: #fff;
}

Finally, here’s the JavaScript to make all of this work (be sure to include jQuery, too). We’ve used the data-speed attribute from earlier as a dynamic part of the JS equation to determine each section’s scroll speed relative to its position within the viewport.

$(document).ready(function(){
   // cache the window object
   $window = $(window);

   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);
                    
      $(window).scroll(function() {
		// HTML5 proves useful for helping with creating JS functions!
		// also, negative value because we're scrolling upwards								
		var yPos = -($window.scrollTop() / $scroll.data('speed')); 
		
		// background position
		var coords = '50% '+ yPos + 'px';

		// move the background
		$scroll.css({ backgroundPosition: coords });	
      }); // end window scroll
   });	// end section function
}); // close out script

But let’s not forget IE, whose earlier versions might not want to play nice with HTML5’s new tags. Add this line to your initialization to help remedy:

document.createElement("section");

That’s all! Try out the demo for yourself and download the source files to experiment with different speeds and section sizes.

---

View Demo | Download Source Files

---