As front end web development moves forward, HTML5, CSS and especially JavaScript starts to play a more prominent role in a website's appearance and functionality. One of the more recent trends is jQuery parallax, i.e. using JavaScript (jQuery) to create a 3-dimensional effect simulating planes in the z-axis.
Parallax is not something new, this technique has been used in cartoons since forever, however it has only recently surfaced onto web design. In essence, parallax on a website is not too different from parallax in a cartoon; i.e. the use of layers moving at different speeds to create a sense of depth. When working with parallax, it is important to understand the maths and physics behind it. Look at the following photos, divided into layers, where each layer is at a different depth to the other (kindly excuse my poor Photoshop skills and lack of patience).
The above photo highlights the foreground, i.e. all items which are at a similar depth, whilst the photo below highlights the background, which is much further away, i.e. at a different depth.
This same layout will be used on your website's design, i.e. each div (or section) will represent a different depth within the website, so take this into consideration when building your HTML and CSS.
Now we get to the parallax effect. When taking the photos, by lowering my line of sight slightly, as shown in the following photos, my vision of the foreground and of the background change at a different rate.
In the photo above, highlighting the foreground, it may be noted that we now more of the foreground, as in it's height increased. In contrast, the visible background, as shown below, has decreased.
This gives the sense that the background and foreground are moving at different speeds, and is the fundamental point of the parallax effect. To further emphasise this point, I have included another set of photos where I have moved my line of sight even lower.
A new layer has been introduced, at a different depth, namely the wall right in front of my face. This layer is even closer than the foreground and can be considered as the first foreground for the purposes of this example. Understandably, this would move at the fastest rate compare to both the second foreground and the background.
In the second foreground, less of it is visible because it is being covered by the first foreground and the bottom half of it is already completely covered.
The visible background is also still decreasing, but the speed at which it is decreasing is slower than that of the first background, even though only a tiny sliver is still visible. Therefore from our observations, we can conclude that layers which are closest to us, move at a faster rate than those in the distance.
Now the fun part...let's apply this to our website's design. First of all, it must be noted that there are loads of different jQuery parallax scrolling options, the one which we will be using is from http://richardshepherd.com/smashing/parallax/ however I suggest that you take a look at the different options available to find the one most suitable for your website or web application.
I won't go into the exact details of how the jQuery code works (you should be able to follow this yourselves using the inline comments); but in a few words it moves the background position of a div based on it's data-speed property. This is the most critical aspect of the parallax effect which we are working with; nothing is moving, the div or section remain exactly where they were; only their respective backgrounds are moving. Perhaps when setting a background you are used to setting:
background: url('image.jpg') top left no-repeat;
However you must know that you could also set the x and y offsets of the background, both in pixels and as a percentage:
background: url('image.jpg') 50% 100px no-repeat;
The jQuery parallax example we are looking at works on these properties, i.e. it increases/decreases the vertical offset of the background, giving the impression that it is moving. Another important factor to take into consideration, is that the height of the div/section should be larger than it's actual size (the exact size could be calculated depending on the speed at which the background is moving). Since the div isn't actually moving, the height needs to be larger so that the background image won't get cropped as it reaches the edges of the div.
You are then also required to set a data-type attribute to the div/section, which could be either a background or sprite. If set to a background, it will be used to coordinate the position of the parallax items within it, whilst a sprite would be the object that is moving itself. If the background image starts already offset (on the y-axis) it is necessary to set the data-offsety attribute, therefore in the above example the y-axis is offset by 100px. If the div data-type attribte is a sprite it is required that you also include the data-Xposition attribute.
Another important thing to keep in mind is that when setting the divs, set them to no-repeat and if they will already begin with a y-offset, this must also set. From the photos we have seen above, the layers which start with a y-offset are those which closer to the viewer, as these would start slightly lower and then move upwards as the user scrolls down. In our example (link below), the first foreground and second foreground start with a y-offset, whilst the background doesn't.
This week I have also come across another interesting use for parallax, in creating 3-dimensional buttons, however one must be a bit wary when using too much parallax because it could slow down the user experience by consuming too many browser resources, especially on a mobile device.
Demo: http://jsfiddle.net/KevinFarrugia/84BD2/
Have fun experimenting with parallax, because there are so many incredible things which could be acheived; and as always we welcome you to share your experiments in the comment box below or on our Facebook page.