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 in some form of Javascript (such as jQuery), and a familiarity 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.
Spritely: This plugin from Artlogic allows you to create dynamic character and background animations (known as "sprites") using HTML and JavaScript. Parallax scrolling is currently one of the most popular effects in the Web design community, and slowly but surely, the Web is seeing some boundary-breaking implementations. The problem is, these are boundarybreaking implementations and that alone can cause some virtual discomfort within an organization.
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.
