Gliding Divs Using jParallax Plugin [Tutorial]

Gliding divs using jparallax plugin
230 Flares 230 Flares ×

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!

230 Flares Twitter 1 Facebook 4 Google+ 2 LinkedIn 223 Pin It Share 0 230 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

7 Comments

  1. Hi, i have a question.

    What if i want to make other layers clickable too? from your demo tutorial, only the last parallax layer the image: (Back to dzyngiri) is selectable.

    What if i have other elements in the second or third parallax layer that needs to be clickable?

    I tried following your tutorial and it works so far. But i cannot make other layers clickable apart from the last layer. Pls advise thanx.

  2. Hello Sayyed,

    Sorry for replying late, you can make other layer clickable too!
    e.g. Make the title.png layer’s (i.e. div) height exactly the height of it’s image and give it a link, same for the last parallax layer div.
    If you avoid the overlapping of two layers whom you want to make clickable, you can acheive your goal :)

Leave a Reply

(*) Required, Your email will not be published