Blog

May, 31, 2013

Tutorial on how to build a Parallax Website

Parallax effect for a web desinger is basically implementing a multiple backgrounds and moving it at a different speed. This effect can be easily achieved by using little bit of javascript and css code. The website built in parallax technology is fun to use and also it gives a very nice experience to the users. Parallax website has become very popular and already been used by thousands of websites.

View Demo | Download Source Code

In this tutorial I will show how we can  build a simple parallax website using few lines of javascript code and css.

First thing you need is jQuery framework which you can always download from jQuery.com or you can just link to google hosted like I have done in this tutorial.

Now, its time to add some html mark ups and set a background images for each slides. As you can see in the code below, I have used four slides for this tutorial. First one is homepage, second one is about, third one is as a blog and last one is for contact.

<div id="home" class="bg_parralax" data-type="background" data-speed="10"></div>
<div id="about" class="bg_parralax" data-type="background" data-speed="20"></div>
<div id="blog" class="bg_parralax" data-type="background" data-speed="40"></div>
<div id="contact" class="bg_parralax" data-type="background" data-speed="80"></div>

Each slide is given a separate ID and we have also used two HTML5 attributes that are used as a selector in our jQuery code which we will look at it after adding some styles on a page and background images for each slides. Below is the css code where each slide is set to different background images.

body{font-family: 'Changa One', cursive;margin:0;padding:0}
 
#home {
 
background: url("images/home.jpg");
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-size: cover;
background-repeat:no-repeat;
background-position:100% 0;
position:relative;
min-height:1080px;
}
 
#about {
 
background: url("images/about.jpg");
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-size: cover;
background-repeat:no-repeat;
background-position:100% 0;
position:relative;
min-height:1080px;
}
#blog {
 
background: url("images/blog.jpg");
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-size: cover;
background-repeat:no-repeat;
background-position:100% 0;
position:relative;
min-height:1080px;
}
#contact {
 
background: url("images/contact.jpg");
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-size: cover;
background-repeat:no-repeat;
background-position:100% 0;
position:relative;
min-height:1080px;
}

Finally, Its now time to play with some javascript to add parallax effect for the slides we just added to the page. The basic idea is to move the slides at different speed while the page is scrolled up and down. This can be achieved by only few lines of code. Below is the javascript code which uses HTML5 data-type selector to loop around all the slides and set background position of each slides page is scrolled up and down.

jQuery(document).ready(function(){
$objWindow = $(window);
$('div[data-type="background"]').each(function(){
var $bgObj = $(this);
$(window).scroll(function() {
var yPos = -($objWindow.scrollTop() / $bgObj.data('speed'));
var coords = '100% '+ yPos + 'px';
// Change the position of background
$bgObj.css({ backgroundPosition: coords });
 
});
 
});
});

And that’s all! You can already check your work in browser. I hope you enjoyed the tutorial and find it useful!

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *