A Parallax Plugin Using jQuery

As usual, if you want to skip the fluff, you can view a demo here or jump straight to the plugin download (includes a demo).

Parallax is all the rage

Parallax is "the effect whereby the position or direction of an object appears to differ when viewed from different positions." At least according to the dictionary. Here is an example, imagine your driving on the interstate in somewhere like, Alabama. Well, if you look directly to your right or left, you will see trees passing by very quickly. However, if you look in the distance, you will see hills that seem to be passing by much more slowly. That is parallax in the real world. As far as the web is concerned, the technique is used to make your website look "3d" while scrolling. Objects on the screen will move at different speeds as you scroll down making your website look like it has a 3rd dimension.

So enough about parallax, now let's talk about how to implement the effect on your website using my plugin!

Implementing the Plugin: CSS and HTML

My plugin is built around scrolling objects up or down at different speeds. It performs all the calculations and moves the objects for you, but you still need to position and set up your view-port and elments with css.

So start by setting up a basic HTML5 (It doesn't have to be HTML5, that is just what I use) page and adding this bit of HTML to your code.

If you are not using HTML5, then simply change the "<section>" tag to a "<div>"

Now let's add some CSS for our view-port

/* view-port 1 css */
#vp-1 {
background:url("images/bg.jpg") center top no-repeat;
background-size:cover;
height:950px;
}

so here we set up the CSS for the view-port for all of our elements. We give it a height and a background. I also used the CSS3 property "background-size:cover;" just to make sure my background covers the entire width of the browser window (within the view-port) while also maintaining the aspect ratio of the image.

Now we set up the css for our scrolling elements within the view-port:

#vp-1-text-1 {
position:relative;
top:150px;
font-size:70px;
text-align:center;
text-shadow: 0px 0px 10px #000000;
color:#fff;
}
#vp-1-text-2 {
position:relative;
top:170px;
font-size:40px;
text-align:center;
text-shadow: 0px 0px 10px #000000;
color:#fff;
}

Basically, I just set our 2 text elements at different font sizes and give them each a text shadow so that they can be seen easily on different backgrounds. Now, let's jump into the plugin code.

Implementing the Plugin: jQuery

Make sure you have the jQuery library and my plugin script added to your webpage, then add this little snipet of code inside some script tags or a javascript file:

$(document).ready(function(){
//view-port 1
//set up a javascript array of objects with options
var $vp1_elements = [
{'el': '#vp-1-text-1', 'opacity': .7}, //defaults the multiplier to .5
{'el': '#vp-1-text-2', 'multiplier': .6, 'boundaries': {top:0, bottom:500}}, //boundaries are useful if you don't wont an object to move beyond certain points (relative to the viewport)
];
//now call the parallax method on our view-port selector and pass our object array to the 'elements' attribute
$('#vp-1').parallax({'elements':$vp1_elements});
});

So, basically you create a javascript array of objects. Those object must at the very least contain the "el" attribute. The "el" attribute is simply the selector string of the element (or elements) to which you wish to apply the parallax scrolling effect. This is a jQuery selector string so you can use all of it's nifty special selectors if you want.

The other attributes are "multiplier", "opacity", and "boundaries". The multiplier can be positive (moves the element down as you scroll) or negative (moves the element up) and is typically between 0 and 1 (like .5) where 0 is no scrolling at all (duh) and 1 matches the scrolling of your browser (would appear like the object is fixed). So going above 1 would make an object move down faster than the scroll. However, don't take my word for it, view the demo to see it in action or download the source (which includes a demo) to play around with the code yourself.