Home » Tutorials » HTML & CSS » Develop A jQuery Parallax Scrolling Framework

Develop A jQuery Parallax Scrolling Framework

Develop A jQuery Parallax Scrolling Framework

  • Stumble it!
  • Share

Introduction to Parallax Scrolling

The Parallax Scrolling effect is one of the popular design trend in web industry. It is a technique to create an illusion of depth by using multiple background images that move at different speeds as the user scrolls down or up a website.

Still not understand how it works? Let’s check out the demo!

View Demo

The Concept

As you viewed the demo above, the page contains 4 main content layers, which is text, bg1, bg2 and bg3. Each of these layers are given an z-index, so that the foreground layers appear above the background layers. Let’s sorting all layers in this way:

  • bg1: The background layer.
  • bg2: The secondary background layer appears above bg1.
  • bg3: This layer appear above bg2. We use it to store the main object / image.
  • text: This is the foreground layer that contains the text.

As user scrolls down the page, the 4 main layers are animated independently of one another to create an illusion of depth.

The HTML Markup

Following is the HTML structure of our page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Demo of building jQuery parallax scrolling framework" />
<title>jQuery Parallax Scrolling Effects | onlyWebPro.com</title>
</head>

<body>
<div class="parallax_wrapper">
	<div class="text">
    	<div id="text-1">
            <h1>The Demo of jQuery Parallax Scrolling</h1>
            <p>This is a demo page that shows you the simplest parallax scrolling technique you've ever came across!</p>
        </div><!-- END text-1 -->
        <div id="text-2">
            <h1>What is Parallax Scrolling?</h1>
            <p>Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade game Moon Patrol.</p>
        </div><!-- END text-2 -->
        <div id="text-3">
            <h1>Example of Parallax Scrolling?</h1>
            <p>As you scroll up / scroll down the page, all the objects are animated independently of one another to create an illusion of depth.</p>
        </div><!-- END text-3 -->
    </div><!-- END text -->
    
    <div class="bg3">
    	<img class="bg3-1" src="pink.png" width="370" height="370" />
        <img class="bg3-2" src="blue.png" width="370" height="370" />
        <img class="bg3-3" src="green.png" width="370" height="370" />
    </div><!-- END bg3 -->
    
    <div class="bg2">
    	<img class="bg2-1" src="cloud-big.png" width="140" height="65" />
        <img class="bg2-2" src="cloud-big.png" width="140" height="65" />
        <img class="bg2-3" src="cloud-big.png" width="140" height="65" />
        <img class="bg2-4" src="cloud-big.png" width="140" height="65" />
    </div><!-- END bg2 -->
    
    <div class="bg1">
    	<img class="bg1-1" src="cloud-medium.png" width="86" height="40" />
        <img class="bg1-2" src="cloud-medium.png" width="86" height="40" />
        <img class="bg1-3" src="cloud-medium.png" width="86" height="40" />
        <img class="bg1-4" src="cloud-medium.png" width="86" height="40" />
    </div><!-- END bg1 -->
</div><!-- END parallax_wrapper -->
</body>
</html>

The CSS

There are 2 important CSS properties that we are going to use for creating illusion of depth for our page, which is position and z-index. Following is how our CSS code looks like:

<style>
body {
	background: #def0fa;
	color: #333;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 1.65;
}

h1 {
	color: #2A6360;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 60px;
	font-weight: normal;
	line-height: 1.3;
}

/*Content*/
.text {
	z-index: 4;
	position: relative;
	width: 940px;
	margin: 0 auto;
}

.text div {
	padding: 100px 0;
	width: 500px;
}

/*Image Object*/
.bg3 {
	z-index: 3;
	position: fixed;
	left: 55%; /* align left edge with center of viewport */
	top: 0;
	width: 940px;
}

	.bg3-1 {
		position: absolute;
		top: 150px;	
	}
	
	.bg3-2 {
		position: absolute;
		top: 750px;	
	}
	
	.bg3-3 {
		position: absolute;
		top: 1350px;	
	}

/*Big Cloud*/
.bg2 {
	z-index: 2;
	position: fixed;
	top: 0;
	width: 940px;
}

	.bg2-1 {
			position: absolute;
			top: 200px;
			left: 500px;
	}
	
	.bg2-2 {
			position: absolute;
			top: 840px;
			left: 250px;
	}
	
	.bg2-3 {
			position: absolute;
			top: 460px;
			left: 130px;
	}
	
	.bg2-4 {
			position: absolute;
			top: 580px;
			left: 850px;
	}

/*Medum Cloud*/
.bg1 {
	z-index: 1;
	position: fixed;
	top: 0;
	width: 940px;
}

	.bg1-1 {
			position: absolute;
			top: 68px;
			left: 230px;
	}
	
	.bg1-2 {
			position: absolute;
			top: 540px;
			left: 750px;
	}
	
	.bg1-3 {
			position: absolute;
			top: 660px;
			left: 630px;
	}
	
	.bg1-4 {
			position: absolute;
			top: 720px;
			left: 287px;
	}
</style>

As you see above, we use z-index to control the parallax effect.

Within each individual main layers elements are absolutely positioned. We can arrange the content in different ways according to the topic of the section.

The JavaScript

Ok, here is the section for us to apply some magic to our page. :)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(window).bind('scroll',function(e){
    parallaxScroll();
});
 
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('.bg1').css('top',(0-(scrolled*.25))+'px');
    $('.bg2').css('top',(0-(scrolled*.5))+'px');
    $('.bg3').css('top',(0-(scrolled*.75))+'px');
}						   
});
</script>

First of all, what we need to do is to bind a scroll event to the window object. Next, we tell the browser to run a function with named “parallaxScroll” when user scrolls down or up. Then inside the parallaxScroll function, we get the current vertical position of the scroll bar by using .scrollTop() API, and use it for the calculation of layer’s position. So that, the foreground layer is always aligned to the top of the document, while the movement of other layers is adjusted according to their depth.

Save your document and view it on web browser.

View Demo


  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Create Facebook App Style Slide-Out Navigation
  • Build Intelligent Layout Using CSS Calc() Property

  • dawesi

    Nice one… could do this also using Sencha ExtJS with same amount of (and almost the same) code.. got to love javascript!

    • http://www.onlywebpro.com onlyWebPro

      Hi Dawesi,

      Thank you for the information :) I will trySencha ExtJS later. Thanks

  • David Davis

    This is one you see most often. Here are other plugins: http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm

    • http://www.onlywebpro.com onlyWebPro

      Thanks David! Thanks for sharing such useful plugin to other web developers!

  • Urevich Sergei

    Thank you very much really helpfully solution

    • http://www.onlywebpro.com onlyWebPro

      You’re welcome! Please do follow us at facebook fan page for more upcoming HTML5 tutorials!

      And we would like to wish you a happy holiday and happy new year in advance!

Android, iOS Development Tutorials