Parallax scrolling effect is one of the emerging trends in web design. If your website is focused on a single product or if you wish to add some interesting effect in your website, parallax scrolling can be the perfect choice. It draws immediate attention of your visitors because unlike the normal page scroll where all the elements are scrolled at the same speed, here you can define scrolling speed to each of the elements separately. This provides a depth in the webpage and creates the illusion of several layers put one over the other. You can create powerful animation with parallax scrolling which will surely make your website come out from the crowd.
In this Parallax scrolling tutorial, we will create several elements as layers and define the different scrolling speed for each of these. As you scroll down, the background scroll slower than the foreground image which creates the illusion of 3D. For achieving this effect, we will use a powerful jQuery plugin – Scrollorama. Although the similar effect can be created without it also, using this plugin makes it really simple to add parallax effect to any element and at the same time it also provides you some additional awesome features.
Before we begin, you may like to have a look what we will be creating in this parallax tutorial.
I have kept the things simple so that you can understand the concept well. This webpage is on Google Nexus 7 with some of common Android applications as icons. Once you are familiar with the concept in this web page, you can add great effects and come up with a stunning website on your own.
HTML Markup
As I explained in the beginning, we will have several elements with different scroll speeds. Here, we have five layers kept inside a parent div with “scrolling” class.
<div> <div id="description"> </div> <img id="main-img" src="images/nexus7.png" /> <div id="icons-back"> </div> <div id="icons-mid"> </div> <div id="icons-front"> </div> </div>
In the description div, we will have a short description about the product. This is fixed along with body background image. Then there is the main-img to display the featured image. This scrolls slowly with respect to the web page scroll.
There are three sets of icons placed inside divs, each set having different scrolling speed. We will be placing the icons inside these three divs and distribute it to fill the screen. The icons set which appears to be behind featured image actually scrolls downwards (negative direction). This adds a better perspective and 3D depth. The other two icon sets scroll faster than the featured image.
That’s all. There is nothing special in the HTML markup. As usual, you need to include the necessary jQuery and CSS file inside the head section – jQuery.min, Scrollorama and StyleSheet.
CSS
First thing we are doing here is to make the background-attachment repeating in both directions and setting it fixed so that the entire background is covered. At the same time, we need to define the height of the web page explicitly.
body
{
margin: 0px;
padding: 0px;
height: 1400px;
background-image: url('../images/background.jpg');
background-attachment: fixed;
}
For each layer, we need to define the position property as fixed. We also need to define the z-index property – starting with the layer from extreme bottom to extreme top. We then distribute the icons by defining the margin and changing the default position of some of the icons (top and left properties).
We are using the blurred icons for the layer which is at the extreme top. This makes them appear floating above the screen. Apart from this there are usual CSS stuffs which you can get in the downloaded file.
#description
{
position: fixed;
width: 400px;
z-index: 2;
}
#main-img
{
position: fixed;
right: 100px;
z-index: 3;
}
#icons-back
{
position: fixed;
z-index: 1;
}
#icons-mid
{
position: fixed;
left: 150px;
z-index: 4;
}
#icons-front
{
position: fixed;
z-index: 10;
}
JavaScript
The magic happens with the JavaScript codes. First thing we need to do here is to initiate the jQuery plugin by defining “scrolling” as scrollorama blocks class selector parameter.
var scrollorama = $.scrollorama({
blocks: '.scrolling'
});
Now all we have to do is to target each element and define the animation. Here you can animate several CSS properties like scale, rotate, opacity, top, etc. But for parallax scrolling effect, we will just animate the ‘top’ property.
For each animation, we can define the following parameters:
- Duration: Numbers of pixels of scrolling till the animation lasts
- Delay: Number of pixels of scrolling before the start of animation (In our case, it is zero)
- Property: Any CSS property (In our case, it is top)
- Start: Value of the CSS property at the start of animation
- End: Value of the CSS property at the end of animation
For keeping the duration and delay of all the animation constant, we can simply define the different value for start and end parameters to introduce parallax effect. Here is how we define the animation for different layers:
scrollorama.animate('#main-img', {
delay: 0, duration: 800, property: 'top', start: 80, end:0
});
scrollorama.animate('#icons-back', {
delay: 0, duration: 800, property: 'top', start: 280, end: 360
});
scrollorama.animate('#icons-mid', {
delay: 0, duration: 800, property: 'top', start: 400, end: -200
});
scrollorama.animate('#icons-front', {
delay: 0, duration: 800, property: 'top', start: 1000, end: -500
});
Well, it’s just that simple! You can change the value for start and end parameters to see how the parallax effect gets changed.
I hope that you find this tutorial useful and simple to implement in your next project.
