MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create Parallax effect with CSS and jQuery

In this article we will see 3 simple steps to create Parallax effect with CSS and jQuery.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Parallax is something that has become fashionable. It's a very interesting effect when used well and can be exploited if you are very creative. It is not hard to do this effect using CSS and Javascript. The whole thing is very simple. Below we show a technique that is fairly widespread around. I tried to avoid frills. What is important is that you understand the calculation, which is the essence of this technique.

Step 1: HTML

Initially we will create two elements. These elements have different backgrounds and we will assign a class to identify bgParallax, they will move the background changed. Many articles out there put a data-type = "background" or something.

We will also insert a attribute data-speed, which is what will determine the speed at which the background will move in relation to other factors. The HTML looks like this:

Listing 1: HTML Code

<html>
<head>
	<title>Parallax Scrolling with HTML and jQuery - MrBool Tutorial</title>
</head>
<body>

	<div id="aboutus" class="bgParallax" data-speed="15">
      <article>
     	<h1>That show's called a pilot.</h1>
	     	<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
	     </article>
	</div>
	<div id="mission" class="bgParallax" data-speed="10">
	     <article>
	     	<h1>Water</h1>
	     <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
	     </article>
	</div>



</body>
</html>

Step 2: CSS

I put some CSS and set a background for each divs. Setting a height, set background, font, color and so on.

Create an CSS file and put the code below:

Listing 2: Css Code

	* {margin:0; padding: 0;}
	html, body {height:100%;}
	 
	/** format elements which have backgrounds parallax **/
	.bgParallax {
		font-family: 'Elsie', cursive;
		color:#FFF;
		margin: 0 auto;
		width: 100%;
		max-width: 1920px;
		position: relative;
		min-height: 100%;
		text-shadow:0 0 10px rgba(0,0,0,0.7);
	 
		background-position: 50% 0;
		background-repeat: repeat;
		background-attachment: fixed;
	}
	 
	/* Define backgrounds of divs */
	#aboutus {background-image: url(bg2.jpg);}
	#mission {
		background-image: url(bg1.jpg);
		-webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		-moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		-ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		-o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
	}
	 
	/** Format article **/
	.bgParallax article {
	  width: 70%;
	  text-align: center;
	  margin:0 auto;
	  padding:20% 0 0;
	}
	 
	/** format text **/
	article h1 {font-size:40px;}
	article p {line-height: 30px; font-size:20px; margin-top:15px;}
	article p a {color:#FFF; text-decoration:none; font-size:30px;}

At that point I just put the CSS to format the look of DIVs. As the background is fixed SEEMS but is not yet in effect parallax. This trick is to put FIXED old, gives up a nice effect. We usually call FAKE PARALLAX.

Now, let’s make use of the jQuery framework.

Step 3: jQuery

First we identify the elements that the effect is applied. In this case are all elements with the class bgParallax.

Listing 3: bgParallax Class

	$(document).ready(function(){
	 
	   $('div.bgParallax').each(function(){
	    	var $obj = $(this);
	   });	
	});

Since we identify each of the elements that will have the effect, we have to identify when the user scrolls the page. For this we will use the scroll function () of JQuery. And here you need a lot of attention: the speed of the backgrounds scroll is different of the speed of the scroll of page. This is what causes the effect of Parallax.

That's why we put the attribute date-speed. We will use that value to set how fast will scroll the background. First we need to define the relationship of the scroll: that is to say 50px. That is, each 50px the background will scroll a certain amount of pixels.

This value is divided by 50px data-speed of the object. Suppose the date-speed is of 10px. So, every 50px scroll the page the background rolls 5px only. Look at the code:

Listing 4: Background Rolls

var yPos = -($(window).scrollTop() / $obj.data('speed'));

We put this value into a variable yPos. The value is negative because the background has to move upwards.

The $(window). ScrollTop() takes a value as the page already rolled the top, this value is divided by $obj.data('speed'), which is the value we put on data-speed attribute of each div.bgParallax.

Now we need to set this value to be the value of TOP in the background-position. We do it like this:

Listing 5: Setting Value

var bgpos = '50% '+ yPos + 'px';

We apply it to the object like this:

Listing 6: Applying the object

$obj.css('background-position', bgpos );

The Javascript code at the end looks like this:

Listing 7: Javascript code

$('div.bgParallax').each(function(){
	var $obj = $(this);

	$(window).scroll(function() {
		var yPos = -($(window).scrollTop() / $obj.data('speed')); 

		var bgpos = '50% '+ yPos + 'px';

		$obj.css('background-position', bgpos );
 
	}); 
});

Here we can see the two images used in this article.

First image used

Figure 1: First image used

Second image used

Figure 2: Second image used

Code result

Figure 3: Code result

You can see the full source code below, we put everything in the same file just for better understand.

Listing 8: Full source code

<html>
<head>
	<title>Parallax Scrolling with HTML and jQuery - MrBool Tutorial</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<style type="text/css">
* {margin:0; padding: 0;}
	html, body {height:100%;}
	 
	/** format elements which have backgrounds parallax **/
	.bgParallax {
		font-family: 'Elsie', cursive;
		color:#FFF;
		margin: 0 auto;
		width: 100%;
		max-width: 1920px;
		position: relative;
		min-height: 100%;
		text-shadow:0 0 10px rgba(0,0,0,0.7);
	 
		background-position: 50% 0;
		background-repeat: repeat;
		background-attachment: fixed;
	}
	 
	/* Define backgrounds of divs */
	#aboutus {background-image: url(imgs/bg2.jpg);}
	#mission {
		background-image: url(imgs/bg1.jpg);
		-webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		-moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		-ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		-o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
		box-shadow:-20px 0 20px 5px rgba(0,0,0,0.7);
	}
	 
	/** Format article **/
	.bgParallax article {
	  width: 70%;
	  text-align: center;
	  margin:0 auto;
	  padding:20% 0 0;
	}
	 
	/** format text **/
	article h1 {font-size:40px;}
	article p {line-height: 30px; font-size:20px; margin-top:15px;}
	article p a {color:#FFF; text-decoration:none; font-size:30px;}

</style>
<script type="text/javascript">

$('div.bgParallax').each(function(){
	var $obj = $(this);

	$(window).scroll(function() {
		var yPos = -($(window).scrollTop() / $obj.data('speed')); 

		var bgpos = '50% '+ yPos + 'px';

		$obj.css('background-position', bgpos );
 
	}); 
});

</script>
<body>

	<div id="aboutus" class="bgParallax" data-speed="15">
      <article>
     	<h1>That show's called a pilot.</h1>
	     	<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
	     </article>
	</div>
	<div id="mission" class="bgParallax" data-speed="10">
	     <article>
	     	<h1>Water</h1>
	     <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
	     </article>
	</div>



</body>
</html>

If you want to download the files used in our tutorial, you can do it at the article's beginning.

You can see the DEMO in this link.

Hope you liked the article, see you next time.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login