Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

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

×

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

Parallax Scrolling Tutorial: How to create a Parallax Scrolling Website

In this article I shall discuss about a feature called Parallax Scrolling, which is frequently used in websites these days. We will also see how to create a parallax scrolling website.

One of the most discussed web design trends of the last few years is the parallax scrolling effect. Whether you like it or not, it is used by a lot of websites.

Parallax scrolling involves the background moving at a different rate than the foreground, creating a 3D effect as you scroll down the page. This effect can be a nice addition to any website. But, unfortunately, if abused, it can be quite annoying. From time to time you’ll find websites completely powered by this effect and your experience won’t be graceful. Because this effect usually animates images in the background, the total weight of the website is heavily increased, resulting in a very slow load.

Parallax scrolling in web design is a technique of scrolling where the background images moves slower than the foreground images. It is used to create an illusion of depth and immersion. We can use backgrounds, text and images to move the page at different speeds. The images and pages go on scrolling as we scroll the mouse.

History

Web designers started using Parallax Scrolling techniques since 2011 using HTML5 and CSS3. Ian Coyle created the first parallax scrolling website for Nike in 2011. The term parallax is derived from Greek word parallaxis meaning alteration. Nearby objects have a larger parallax than more distant objects when observed from different positions. So parallax scrolling can be used to determine distances.

Pro's and Con's

Following I’ve listed some pros and cons of this technique:

Pros:

  • Improves visual appeal of the website
  • Content can be displayed on a single page, hence reducing much needed navigation and clicks of the end user.

Cons

  • As heavy animation is required in this technique, the page loading time is increased.
  • It doesn’t function smoothly across all browsers.

In this article, the parallax scrolling code has been written in HTML5, CSS and JavaScript. We are using <section> tag in the html5 files with some attributes such as data-type and data-speed. The attributes which start with “data” means that it is used to store private data. Private data means that whatever data is being written the users cannot see it and it doesn’t affect the layout.

In the subsequent sections I will be covering the following points:

  • Simple example of Parallax scrolling using data attribute
  • Simple example of Parallax scrolling using article attribute
  • Parallax scrolling using jQuery
  • Horizontal Parallax scrolling

Note: All the examples in the following sections are executed by opening the .html file in any of the browsers.

The source code of each example seen in this article is attached to the top of this article, and you can download it for reference by clicking the download button.

Simple example of Parallax scrolling using data attribute

The example below is a simple program written by using data-attribute in the code:

Listing 1: sample.html

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Simple Parallax Scrolling Technique</title>
</head>
<style>
.image1 {
  background: url(images/flower1.jpg) 100% 0 repeat fixed; 
min-height: 1000px;
  height: 500px;
  margin: 0 auto;
  width: 80%;
position: relative;
}
.img2 {
  background: url(images/flower2.jpg) 100% 0 repeat fixed; min-height: 1000px;
  height: 500px;
  margin: 0 auto;
  width: 80%;
 position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
.animal {
  background: url(images/elephant.jpg) 100% 0 repeat fixed; min-height: 1000px;
  height: 500px;
  margin: 0 auto;
  width: 80%;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

</style>
<body>
<section class="image1" data-type="background" data-speed="20">
</section>

<section class="img2" data-type="background" data-speed="20" >
</section>

<section class="animal" data-type="background" data-speed="20" >
</section>
</body>
</html>

In the above code, we are showing a simple Parallax scrolling technique by using data-attributes. We have added three images to this program. Here we have shown a simple example of sliding the background images at different speed.

Here, in this code, we have used a styling for the html page wherein we have defined the image height, width and path .

position: relative; is used for the images.

background: url(images/flower1.jpg) 100% 0 repeat fixed; is used to give the source path for the images to be displayed in the output. This line has been defined inside the <style> tag.

<section class="image1" data-type="background" data-speed="10" >; this section tag is used with different data attributes in it i.e. class, data-type and data-speed.

The data-type=”background” is used to define that the image is used for background section and data-speed=”10” is used for the speed of the data that moves on the image.

We can also add some more images to show some more background sliding images in the output.

In the output, when we start scrolling, different images appearat the specified speed given in the program.

Execution

Open the sample.html in any of the browsers, an output as below would be seen. If you scroll down, all the images will move up vertically. You can check the attached source code and try the example.

Figure 1: Images moving up

Simple example of Parallax scrolling using article attribute

The above was a simple parallax scrolling example by sliding only background images. Now, in the next example, we will be using using an <article> tag and then the background will start scrolling slower than the content. The example code is as given below:

Listing 2: sample-content.html

  <!DOCTYPE HTML>
  <head>
  <meta charset="utf-8">
  <title>Simple Parallax Scrolling Technique</title>
  </head>
  <style>
  .image1 {
    background: url(images/rose.jpg) 100% 0 repeat fixed; min-height: 1000px;
    height: 500px;
    margin: 0 auto;
    width: 80%;
   position: relative;
  }
  .image1 article {
    height: 600px;
    position: absolute;
    text-align: center;
    top: 250px;
    width: 100%;
    font-size:50px;
    color:white;
  }
  .img2 {
    background: url(images/heart.jpg) 100% 0 repeat fixed; min-height: 1000px;
    height: 500px;
    margin: 0 auto;
    width: 80%;
    position: relative;
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
  }
   
  .img2 article {
    height: 600px;
    position: absolute;
    text-align: center;
    top: 250px;
    width: 100%;
     font-size:50px;
     color:white;
   
  }
  .animal {
    background: url(images/elephant.jpg) 100% 0 repeat fixed; min-height: 1000px;
    height: 500px;
    margin: 0 auto;
    width: 80%;
  position: relative;
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
  }
  .animal article {
    height: 600px;
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
     font-size:50px;
     color:white;
  }
  </style>
  <section class="image1" data-type="background" data-speed="30" >
  <article>The flowers of the rose grow in many different colors, from the well-known red rose to yellow roses and sometimes white or purple roses.</article>
               </section>
   
  <section class="img2" data-type="background" data-speed="10" >
           <article> For in the true nature of things, if we rightly consider, every green tree is far more glorious
  than if it were made of gold and silver.</article>
  </section>
  <section class="animal" data-type="background" data-speed="10" >
           <article>Elephants are the largest land-living mammal in the world. The elephant's trunk is able to sense the size, shape and temperature of an object. An elephant uses its trunk to lift food and suck up water then pour it into its mouth.</article>
  </section>
   
  </html> 
  

Details of the code:

In the above example, we have used three images in the background section with different data speed and have added contents.

Here we have used the style sheet to add background images by using each <section> tag in the html file. In the <style> tag we have given a URL path for the background images to slide.

.image1 article{ } is used to style the contents by using font size, height, width and text-align in the <style> tag.

Next, in the <section> tag we have specified different attributes. The attributes which start with “data” means that it is used to store a private data.‘data-type="background"’ is used to define the type of the data i.e. background and ‘data-speed="30"’ is used to define the speed of the data to be moved in the output.

Inside the <section> tag we have used an <article> tag to write the content within that tag. The <section> tag is used to scroll the background slower than the content written in the <article> tag.

In the output when we start scrolling the page through the mouse, the background images move slower where the content written upon the images moves faster than the background images.

Execution

Open the sample-content.html in any of the browsers, an output as below would be seen. If you scroll down, all the images and text will move up vertically. You can check the attached source code and try the example.

Figure 2: sample-content.html output

Parallax scrolling using jQuery

Now let us see how parallax scroll use jQuery Framework.

Listing 3: sample-jquery.html

  <html>
<head>
<title>jQuery Parallax Scrolling Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<style>
		body{
				text-align:center;
			}
			.image1{
				position:fixed;
				background:url(images/garden.jpg) top center no-repeat;
				height:100%;
				width:100%;
				top:0;
				left:0;
			}
			.image2{
				position:fixed;
				background:url(images/red_flower.png);
				width:120px;
				height:120px;
				left:60%;
				margin-left:-600px;
				margin-top:600px;
			}
			.image3{
				position:fixed;
				background:url(images/butterfly-icon.png);
				width:120px;
				height:120px;
				left:45%;
				margin-left:400px;
				margin-top:200px;
			}

			.content{
				width:400px;
				border-radius:10px;

				background:#fff;
				box-shadow:0px 0px 5px #000;
				-moz-box-shadow:0px 0px 5px #000;
				-webkit-box-shadow:0px 0px 5px #000;
				-o-box-shadow:0px 0px 5px #000;
				text-align:left;
				padding:25px;
				position:relative;
				margin:15px auto;
			}
		</style>
		<script>
			$(document).ready(function(){
				$(window).bind('scroll',function(e){
			   		parallaxScroll();
			   	});


			   	function parallaxScroll(){
			   		var scrolledY = $(window).scrollTop();
					$('.image1').css('background-position','center -'+((scrolledY*0.2))+'px');
					$('.image2').css('top','-'+((scrolledY*0.5))+'px');
					$('.image3').css('left','-'+((scrolledY*0.6))+'px');
			   	}


			});
		</script>
	</head>
	<body>
		<div class="image1"></div>
		<div class="image2"></div>
		<div class="image3"></div>

		<div class="content">
			<center><h1>Simply content page</h1></center>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
			<p>Eonsecteturdiingelulam a laoret eratacin itupis. Quisque Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque.</p>

			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

			<p>Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient.</p>

			<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut conse ctetur adipisicing elit, sed do eiusmod conse ctetur adipisicing elit, sed do eiusmod</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
			<p>Eonsecteturdiingelulam a laoret eratacin itupis. Quisque Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque.</p>

			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

		</div>
	</body>
</html>

  

The above program of parallax scrolling has been written using jQuery script.

In this program, we have used three images, wherein two images move upon the background image. The background image also moves but at very slower speed than the other images.

We have used the <style> tag to define styles for all images i.e. height, width, URL path for the images etc. We have defined classes in <div> tag for each images and in <style> tag we have given separate styles for separate images.

In <style> tag we have define “position:fixed;” which is used to fix the images position on the page. The positon can be fixed, absolute or relative.

  • $(document).ready(function(){}; is used to specify a function to be executed when it is completely ready.
  • $(window).bind('scroll',function(e){ }; is used to execute the function each time when the event is trigger.
  • var scrolledY = $(window).scrollTop(); is used to scroll the window at the top which is stored in the variable scrolledY.
  • $('.image1').css('background-position','center -'+((scrolledY*0.2))+'px'); is used to set the background position in the center and move the image at the speed of 0.2 pixels.
  • $('.image2').css('top','-'+((scrolledY*0.5))+'px'); is used to move the second image at top with speed of 0.5 pixels.
  • $('.image3').css('left','-'+((scrolledY*0.6))+'px'); is used to move the third image at the left side i.e. horizontally with the speed of 0.6 pixels.

In output when we scroll down the page, the two images which we have added upon the background images moves on horizontally.

Execution

Open the sample-jquery.html in any of the browsers. An output as below would be seen. If you scroll down, the text will move up vertically. You can check the attached source code and try the example.

Figure 3: sample-jquery.html output

Horizontal Parallax scrolling

In this section, we will see how to parallax scroll horizontally using jQuery. To get this feature we have used a plug-in called jInvertScroll.

Listing 4: sample-horizontal.html

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.jInvertScroll.js"></script> 
  

The above lines have to be added while writingjQuery code in the program, which helps to scroll the page horizontally.

Below is a simple program to scroll the page horizontally:

  <!DOCTYPE html>
  <head>
              <meta charset="utf-8" />
              <title>Horizontal parallax scrolling</title>
              <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" />
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
              <script src="js/jquery.jInvertScroll.js"></script>
      <style>
      body
              {
                overflow-x: hidden;
              }
   
              .scroll
              {
                  position: fixed;
                  bottom: 0;
                  left: 0;
              }
   
              body
              {
                  padding: 0;
                  margin: 0;
                  font-family: 'Open Sans', sans-serif;
                  font-weight: 300;
                  font-size: 16px;
                  color: #555;
                  background: #9fdefd;
              }
   
              h1,
              h2
              {
                  color: #238acb;
              }
   
              .firstimage
              {
                  line-height: 0;
                  z-index: 100;
                  width: 1500px;
              }
   
              .secondimage
              {
                  z-index: 250;
                  line-height: 0;
                  width: 2000px;
   
              }
   
              .thirdimage
                          {
                              z-index: 250;
                              line-height: 0;
                              width: 4500px;
                              top:75px;
                              margin-left:1500px;
              }
   
              .image
              {
                  z-index: 250;
                  line-height: 0;
                  width: 4500px;
                  top:75px;
                  margin-left:3000px;
              }
   
              .image2
              {
                  z-index: 250;
                  line-height: 0;
                  width: 4500px;
                          bottom:1px;
                  margin-left:4000px;
  }
              .front
              {
                  z-index: 500;
                  top: 150px;
                  width: 6000px;
              }
   
              .page
              {
                  top: 0px;
                  width: 500px;
                  background: white;
                  padding: 10px 30px;
                  border: 1px #eee solid;
                  position: absolute;
              }
   
   
              .panel2
              {
                  left: 2575px;
              }
   </style>
  </head>
  <body>
  <div class="container">
                          <div class="firstimage scroll">
                                      <img src="images/underwater.jpg" alt="" />
                          </div>
   
                          <div class="secondimage scroll">
                                      <img src="images/base_stones.png" alt="" />
                          </div>
   
                          <div class="thirdimage scroll">
                                      <img src="images/fish_256 (1).png" alt="" />
                          </div>
   
                          <div class="image scroll">
                          <img src="images/shark.png" alt="" />
                          </div>
   
                          <div class="image2 scroll">
                          <img src="images/pebbles (1).png" alt="" />
                          </div>
   
                          <div class="front scroll">
                          <div class="panel2 page">
  <h2>Dummy content</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   
  <p>Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient.</p>
   
                                      </div>
   
      </div>
   
              <script type="text/javascript">
              (function($) {
                          $.jInvertScroll(['.scroll']);
              }(jQuery));
   
              </script>
   
  </body>
  </html>
  

The above program is of horizontal parallax scrolling using jQuery.

In this program, we have used several images in code and have given their height and width inside the <style> tag.

  • Inside the <style> tag, we have described different height and width for different classes.
  • <img src="images/underwater.jpg" alt="" /> is used to give the source path of the images inside the <div> tag.
  • Same as in the above line, we have used some more images in the program by defining different classes name in the <div> tag.
  • $.jInvertScroll(['.scroll']); is used to scroll the images which we desire to scroll and this line has been defined inside the <script> tag.

In the output, when we start scrolling the page, the image goes on moving horizontally.

Execution

Open the sample-horizontal.html in any of the browsers, an output as below would be seen. If you scroll, all the images will move left horizontally. You can check the attached source code and try the example.

Figure 4: Scrolling left example

In this article we saw the feature of Parallax scrolling. This feature can be used to get better UI displays on your website. You can also download the source code and try the examples in your own computer. It is better to study and make few changes to practice. Hope you liked the article, don’t forget to help MrBool and see you next time.



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[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