A quick demo of using jQuery for parallax. This example just creates a nice visual effect but it could easily be converted for more constructive purposes but I’ll leave that up to you.
Parallax (for the sake of this post) is the effect whereby things at different distances move at different rates, for example looking out of a train window the closer items are the faster they move past you. This is as horribly simplified and inaccurate description but will suffice for the sake of this example.
I’ve used three transparent PNGs for this but you can use as many layers as you like or easily replace the PNGs with div tags containing whatever content you need.
This is very simple. The html you need is as follows:
See, told you it was simple. The div is the outer container into which the layers belong. Add the images in order of the bottom one (smallest) first. Job done.
The images (or layers) you use should each be a different size, the bigger the image the more movement. Each image must be at least as big as the viewer, if you set one side of it to be the same size as the viewer and another to be larger it will only move on that axis, which is a nice effect in itself. So if your image is the same height as the viewer but wider it will only move horizontally.
This may be stating the obvious, but I’ve used transparent pngs, you must be able to see the lower images through the upper ones. To create them I used a photoshop file with a group for each image. This meant I could check how they would look before I output them. You can view the three images here:
You can view the entire CSS file here. The important parts are as follows.
The background color can be whatever you fancy. Bear in mind that if all your layers are transparencies the background color will show through. Of course you could make the bottom layer fully colored, patterned or whatever you fancy. You could also give the #Parallax div a background image if you wanted.
The width and height are important, remember your images should all the same dimensions or bigger than this div. Overflow must be set to hidden to ensure that tags within this div will not cause it to change it’s size and will not poke out of the sides.
The relative position is required as we will be setting the tags within the div to absolute and we want them to be positioned relatively to this div, not to the document.
Each of the images within the div (or whatever you use for layers) must be set to use absolute positioning so that we can move them around with jQuery. I’ve set their initial positions to the top left corner but you can set them to wherever suits.
This uses jQuery for the heavy lifting. It could be converted into a handy little jQuery plugin but I wanted to keep it as simple as possible for the sake of the example, plus others have already done that.
What this does is whenever the mouse is moved over the viewer (#Parallax div) it calculates it’s position over the div (as percentages) then moves each of the inner images by that same percent of their overflow.
Firstly work out the xPos and yPos. To do this we subtract the viewers x and y offset from the x and y mouse position. This is because the mouse positions returned are relative to the document not to the viewer. The offset values give us the viewers position relative to the document.
Next, work out the horizontal and vertical position of the mouse pointer as a percentage (0 = the top of the viewer, 100 = the bottom).
Loop through each image, for each one work out the difference in width and height between the image and the viewer. The image’s new position for each axis is the percentage calculated earlier for that axis of the difference for that axis. So if the mouse is dead center on the viewer the horizontal position is 50% of the difference between the image width and the viewer width.
Finally, we create an object containing the new CSS settings and apply it via a very short animation which gives the effect a nice smooth finish. You can just jump to the new position but it looks a little too rough for my tastes.