Gliding Divs Using jParallax Plugin [Tutorial]

Today we bring you a really beautiful example of Gliding Divs, using the jParallax plugin. First of all, lets learn a little bit about this plugin:

What does jParallax do?

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Using jParallax

The default behavior of jParallax is to show the whole width of a layer, in response to the mouse traveling the whole width of the parallax ‘window’. When the mouse is moved to the extreme left-hand side of the parallaxed window, the left-hand side of the layer meets it, and when the mouse is moved to the extreme right-hand side of the parallaxed window, the right-hand side of the layer arrives at the right hand-side of the window.

The simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and thus appear closer, and unless a layer is smaller than the viewport, its edges are never seen. The Color Drops Demo was made in exactly this way, with jParallax in its default state, and the ‘speed’ of the layers controlled simply by making the images different sizes. No options have been passed in.

So, let’s start this tutorial by referencing this plugin in our document.

jQuery

Lets link all the required jQuery files to our html file

<!-- Grab latest version of jQuery -->
<script charset="utf-8" type="text/javascript" src="files/jquery-1.2.6.min.js"></script><script charset="utf-8" type="text/javascript" src="files/jquery.bigtarget.1.0.1.js"></script>
<!-- Fading Labels -->
<script charset="utf-8" type="text/javascript" src="files/jquery.infieldlabel.min.js"></script><script type="text/javascript" src="files/jquery.validate.min.js"></script>

HTML

Now lets add different layers using div’s (yeah, these are our Gliding Divs). Following I have just shown 3 divs, but in demo we have added more than 10 divs.

<div id="parallax">
<div style="width: 1180px; height: 510px; z-index: 20; position: absolute; left: 5.316666666666666px; top: 0.4528301886792453px; opacity: 0.8;"><img style="position: absolute; top: 128px; left: 420px;" src="files/cloud_blue.png" alt="" /></div>
<div style="width: 1170px; height: 510px; z-index: 9; position: absolute; left: 7.9750000000000005px; top: 0.4528301886792453px; opacity: 0.6;"><img style="position: absolute; top: 50px; left: 790px;" src="files/cloud_yellow.png" alt="" /></div>
<div style="width: 1160px; height: 520px; z-index: 8; position: absolute; left: 10.633333333333333px; top: 0.22641509433962265px;"><img style="position: absolute; top: 102px; left: 950px;" src="files/cloud_blue_medium.png" alt="" /></div>
</div>

CSS

And here comes the css. We are defining the main parallax div, in which all the gliding div’s are present.

.wrapper{
        width:890px;
        margin:50px auto;
        padding:25px 35px;
        zoom:1;
        position: relative;
}
/* Parallax */
#parallax {
	overflow:hidden;
	width:1200px;
	height:530px;
	padding-bottom: 50px;
	position: relative;
	margin-left: -200px;
	margin-top: -47px;
	z-index: 99;
}

So in this way we have created a really beautiful Gliding Divs using jParallax Plugin. For more information about jParallax, visit here. And you can have a look what we have created and download the demo.

If you really like what we have created or if you have any query about the demo then you can simply comment below and don’t forget to share the words. After all Sharing is Caring!