Parallax

iaian7 » code » webcode John Einselen, 17.02.09 (updated 10.04.11)

Parallax is a small javascript based on the Mootools library that allows you to set up 2.5D interaction with basic DIVs and CSS styling. Anywhere from scrollable landscapes to lens flare effects can be achieved, with reasonably easy setup and simple depth controls.

Because 24bit transparent PNGs are used, it can take a little while to load. Eventually I’ll get Fireworks in addition to Photoshop, and will be able to export 8bit PNG files with full alpha. Till then, 24bit is the only way to do it.

Open landscape example »

Code

Javascript

The script itself is fairly simple to set up. At the bottom of the script, you’ll find this code:

window.addEvent('domready', function(){ var new3D = parallax('cover', '#box div', '.55', '.60', '.65'); // Settings: container ID, elements selector, speed (0 through 1), invert (1 or -1), balance (0==only X, 2==only Y) });

container ID – ID of the element used for capturing mouse movement.
elements selector – CSS element selector grabs every object to be moved.
speed – controls how quickly the effect follows mouse movements (0 through 1).
invert – look inversion, like in a video game (1 or -1).
balance – controls the ratio between X and Y coordinates. Allows the user to blend between side-to-side, up-and-down, and everything in between. (0 = only X, 2 = only Y)

HTML

<div id="box"> <div id="follow0" title="-0.1"></div> <div id="follow1" title="0.1"></div> <div id="follow2" title="0.3"></div> <div id="follow3" title="0.5"></div> <div id="follow4" title="0.7"></div> <div id="follow5" title="0.9"></div> </div> <div id="cover"></div>

The box container allows the script to select all interior divs (’#box div’), making the effect easier to setup (no manually setting up layers). The order of divs controls their stacking – make sure that depth, from back to front, is always sequential. Since DIV elements do not have a rel=”“ or equally unused attribute, I had to use the title=”“ to control the apparent depth. Values from -1 to +1 are recommended, but more extreme values can be used. Just keep in mind these are all multipliers – values under -1 and over +1 will move further than the mouse (one in the opposite direction, of course). The IDs of the layered divs does not matter, but they must be unique.

The #cover div is important because of the use of the title=”“ attribute to pass depth information to the script. Otherwise, you’ll be left with browser tooltips poping up informing the user of the depth value of the top layer. It’s also important because the script uses it to capture mouse position data – while you could just as easily use the “#box” div to do the same, this serves dual purposes rather nicely (blocking tooltips and capturing mouse data).

CSS

body {
	margin: 0;
	padding: 0;
	background-color: #000;
}

#box, #cover {
	width: 720px;
	height: 400px;
	position: absolute;
	margin: 0;
	padding: 0;
	overflow: hidden;
	top: 0;
	left: 0;
}

#follow0, #follow1, #follow2, #follow3, #follow4, #follow5 {
	width: 1280px;
	height: 640px;
	left: 350px;
	top: 200px;
	margin: -320px 0 0 -640px;
	display: block;
	position: absolute;
}

#follow0 {
	background: url(images/desert0.jpg) no-repeat left top;
}

etc...

Unfortunately, not much of the script is automated yet, in terms of layer positioning. The CSS must be done in such a way as to position the #box and #cover, with the latter over the other, and the 2.5D layers centred inside the former (negative margins set to half the width and height of the container).

Download

1 (2kb)

Mootools 1.2.1 core (57kb)

Known Issues

Parallax has only been tested in Safari, Firefox, and Opera on systems running OS X 10.5. Opera does not remotely play nicely, Firefox is ok, and Safari runs like a champ.

Mouse movement is detected on a page-wide basis, and some coordinates are captured at first initialization. Page resizing, element resizing, and other changes may change how the effect reacts to the mouse. Currently, it’s best

Version History

v0.1.8 — added final settings and control variables
v0.1.4 — added mouse follow delay
v0.1.0 — first successful testing, mouse following fixed

Credits:

Parallax is, in part, derived from code by Stephen Chapman and Kurt Grigg

Support

Support is not offered, sorry. This is a fun little test, and barely a beta at that. Use at your own risk, and while I hate to do this, questions may or may not be allowed in the comments below. Please don’t get upset when comments are periodically cleaned out, and/or I never respond. Thanks for your understanding.