Introduction to Parallax

You’ve probably noticed the parallax effect before, even if you lacked the words to describe it: a fluid website that moves as you scroll, a pretty video game background filled with depth, or even the way the stars’ position seem to change in the night sky when you move. All of these are examples of parallax.

In truth, “parallax” is a term in astronomy referring to the perceived location of an object in two different places. Scientists use this concept to measure the distance to stars and other celestial objects. In fact, it’s the only way stars outside the solar system can be measured.

This concept was taken and applied it in a new way to design with what is called parallax scrolling. Think about sitting in a car. The highway rails zoom by, while the trees in the distance move at a steady pace, and the faraway mountains seem to not move at all. This is how parallax scrolling works, and these core concepts are applied to the digitalized version.

From the Skies to the Screen

Surprisingly, parallax has another root, in traditional animation. At the time, animators used multiplane cameras to create an illusion of 3D depth, a technique popularized in Snow White and the Seven Dwarfs.

Soon after, video game designers realized that they could use this idea. Later, arcade games utilized parallax, drawing people into the world of gaming with breathtaking depth and visuals. From Sonic the Hedgehog to Starbound, this style is still used in sidescrollers to give the illusion of a vast world.

Parallax scrolling is a relatively new idea when it comes to web design. Made possible by the release of HTML5 and CSS3, designers embraced the new, beautiful styling this technique could provide. Parallax is growing in popularity, and it can be seen anywhere from professional business sites to artist blogs.

Best Standards and Practices

If you’re thinking about adding parallax scrolling to your next website, there are a few things you should think about first.

• Consider making only part of the page parallax, such as an interactive logo and always establish a fallback in case the browser cannot animate your page.
• Remember that less is more. Two layers, three layers — that’s all right. But dozens of layers is just going to be overwhelming at best and a significant site slowdown factor at worst. Remember that parallax can be very demanding on older computers.
• Keep in mind the tone you’re trying to set with your website. Depending on how it’s used, parallax scrolling can give either an elegant yet attention-grabbing feel, or establish an otherworldly, fantasy-like atmosphere. Either way, it’s not something that’s suited for websites that are after a more simple and understated tone.
• Subtlety is most likely what you’re after. Parallax is a relatively new trend, one that already garners criticism for being “overused.” So, shoving it into people’s faces isn’t going to help much. Take it easy. Until you know what you’re doing, use parallax as an accent, not as a part of your core design.

Parallax Scrolling Examples

No words can exactly describe a visual experience; you need to see it for yourself to decide whether or not your website needs this feature. Here are a few great examples of parallax’s potential:

• I Hate Tomatoes Demo: though just a simple demo, this is a great example of the fading text effect. The transitions between images could be smoother, but it’s still quite nice.
• Firewatch: here’s a great example of dozens of layers done well. Normally such a thing would give a pilot motion sickness, but on this site, it’s simply gorgeous.
• The Boat: using amazing motion effects, this website uses parallax to tell a captivating story. Its effects can serve as inspiration for all designers.
• Costa Coffee: though not the most well optimized, Costa Coffee’s site makes great use of the “mousemove” parallax effect.
• Digital Hands: last but not least, Digital Hands provides a great example of “less is more.” Their beautifully crafted parallax header captures the eye, while not taking up the entire website with dizzying motion.

Parallax Scrolling Tutorials

You’ve looked through the examples, and you’re sold on parallax scrolling. Now where to begin? It might require a redesign, but it’s really not too difficult to implement this pretty feature.

• I Hate Tomatoes Simple Parallax Tutorial: this guide delves a bit more into parallax scrolling. It’s easy enough to understand even for newer coders and designers, but it creates a different and more complex effect.
• I Hate Tomatoes Advanced Parallax Tutorial: though it covers the same baselines, this one includes a few more effects. Once you’ve mastered the simple tutorial, move on to this one and try out the advanced techniques.
• Envato Video Tutorials: with this set of video and text tutorials, it’s hard to go wrong. If you work better with a visual guide, these make helpful lessons.
• 1st Web Designer HTML, CSS, and jQuery Tutorial: rather than just a simple CSS tutorial, this advanced guide explains how to incorporate all three elements.
• Pure CSS Parallax Scrolling: though less a tutorial and more a customizable template, this resource is still quite useful. There are many reasons you may wish to avoid JavaScript, which this guide delves into as well.
• The Ultimate Guide to Parallax: though this page provides no direct tutorials, it’s an absolutely massive repository of examples, guides, and things to keep in mind. A great resource if you’re interested in learning everything there is to know about parallax in web design.

Ready For Parallax?

As you can see, parallax isn’t so hard to get the hang of. It’s easy to learn how to incorporate it, and the end result is often very beautiful. Get to reading these tutorials, and you’ll have a seamless, fluidly designed website in no time.