Do You Parallax?
By the time you read this,
there will be some new,
bleeding edge, blow-yourmind
type design trend that
you’ll desperately want to
include on your Web presence
and that other designers have
seemingly already mastered
and from which they are
seeing positive results.
The problem is, by the time you get around to it, it may just be more “tired” than “wired.”
The pace of innovation in digital design is phenomenally fast as you more than likely know (as Heidi Klum says, “One day you’re in, the next day you’re out”). Thus, every digital designer — and every enterprise that employs them — needs to be aware of what’s possible and feasible to deploy within the visual experience developed and provided to users through a company’s website presence.
One of the more innovative and engaging trends of the recent past has been that of parallax design. Parallax refers to the design of two parallel objects that move at different speeds. The practice is not new by any means (it was used in 1980s video games, for example). What is new are the countless examples of parallax design in action on the Web today. This popularity is bringing the practice into much greater focus and increasing its use by the design digerati.
Websites that employ parallax design are disruptive in that they force users to shift away from the predominant, linear paradigm of scrolling (the traditional up and down style) and into a more immersive, nearly 3D browsing experience (or at least something with more dimension and depth). That can be frightening for some users, but if the aim is to create a useful, and more importantly, more memorable and engaging experience for users, implementing parallax scrolling is one sure-fire way to do that. Let’s look at a few examples:
Krystalrae.com: Contemporary clothing retailer Krystralrae has an equally contemporary design thanks to its use of parallax scrolling. The entire site is actually built using a parallax effect, but where it really stands out is when viewing the actual clothing collection. As a user scrolls down with their mouse, a static image of a model wearing the clothes (as seen below) changes outfits as they progress.
Saucony.com: To promote its new Kinvara 3 running shoe line, Saucony leveraged parallax design to detail the physical construction of the shoe and the technology behind it. As a user scrolls through the website, they virtually experience the shoe in its various stages of production (see sidebar) — from the shoe’s engineering and cushioning technology, to treads and colors.
Making Parallax Work
To create your own parallax design, you’ll be pleased
to discover that there are numerous tutorials, scripts
and resources available on the Web. With experience
with HTML5 and CSS3, going parallax is increasingly
simple. Here are a few of the most popular
jQuery plugins to add some parallax effects to your
current (or soon to be redesigned) website:
Stellar.js: This is probably the most popular and highly regarded plugin available. It allows users to add parallax scrolling effects to any type of scrolling element.
Scrollorama: Use Scrollorama if you want to animate different elements on a Web page based on a browser window’s scroll position.
Arctext.js: This jQuery plugin was made to help designers rotate letters (it’s based on the Lettering.js plugin) by calculating the “right rotation” of each letter and distributing them equally across the arc of a given radius.
Scrolldeck.js: Scrolldeck.js provides an (almost) static background that moves slower than a visitor scrolls by changing the top position of the background for every pixel of the page that is scrolled.
Curtain.js: Create Web pages with multiple fixed panels that unroll using Curtain.js, which helps your page move, as the name implies, in the same way that a curtain rises.
Keep in mind that the Parallax design trend is not well suited to those websites (or individual pages) that require an abundance of information, because users will scroll through and scan, rather than read the information presented. Its best use is when images and visual graphics can express meaning and evoke positive sentiment far more than words alone. Parallax scrolling is an immersive way to present simple content in a dynamic fashion, particularly for websites based on artistic or creative expression. As always, make sure that the site’s functionality is adequate to the content being presented and appropriate for its audience.