What is zLayer?

zLayers is a jQuery parallax plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent.

zLayer is perfect for interactive illustrations and rich user experience through creative methods through a parallax effect.

Best part about zLayer is how easy, lightweight, and quick the plugin is!
zLayer Example

Click here for a larger version of this example

zLayer Example

zLayer Example

Tutorial on how to setup your zLayers

Download a copy of zLayer v0.2 (Dec 10th, 2010)

Version 0.2 is now out!.

• Script has been optimized to use less memory between gathering and delivering each elements coordinates.
• Script size has now been reduced in size by 9.5% from its original size from v0.1.
• Bug with IE has been fixed and should be working correctly now.

jquery.zlayer.min.js (461bytes)
jquery.zlayer.full.js (905bytes)
jquery.zlayer.full.js (v0.3-Beta) (1.7kb)
Download the Example

API & Options

Installing a zLayer
How to install a zlayer on an element:

$('#someElement').zlayer();

Mass

Mass gives parallax movement distance limitation. The more mass you give an element the less it will move from its original position.

$('#someElement').zlayer({
    mass:15
});

Default is 10

Canvas

Sometimes you want a parent element to be the event for moving your zlayers. By using canvas and pointing to this parent element, we contain the zLayers movements to our parent element.

$('#someElement').zlayer({
    canvas:'#parentElement'
});

Default is window

Confine

Confine is a way to stop either x or y axis’ from any movement what so ever (Such as our above example’s background).

$('#someElement').zlayer({
    confine:'y'
});

Default is none

Force

Force allows you to control if an element should be pushed or pulled away from your mouse’s position. This is a fun one to mix up with different elements and create many effects.

$('#someElement').zlayer({
    force:'push'
});
or
$('#someElement').zlayer({
    force:'pull'
});

Default is push

Offsetting zLayers, Styles and JavaScript

To position elements and fine tune their locations to the page or parent element do NOT use top or left styles. The top and left styles are reserved for zLayer movement. Instead of top and left use positive or negative margins to better position your elements.

Here is our above examples CSS

.background,.guy,.guys {position:absolute;}
.background {z-index:1; margin-left:-290px;}
.guy {z-index:4; margin-left:-305px;}
.guys {z-index:2; margin-left:-329px; margin-top:200px;}

Notice how all elements have a position of absolute, this is important for zLayer success. Also notice how each element has a unique z-index, one higher than the other to properly position our zLayers on top of each other.

Last notice how each element has a margin-top and or margin-left to better offset their location of movement around in the parent element. This again is how we better position or rather fine tune our zLayers.

Above examples JavaScript

$(document).ready(function(){
    $('.background').zlayer({mass:15,confine:'y',canvas:'#container'});
    $('.guy').zlayer({mass:8,force:'push',canvas:'#container'});
    $('.guys').zlayer({mass:5,force:'push',canvas:'#container'});
});

Thanks, I hope you have fun and enjoy my plugin!
Devin R. Olsen