The launch of Nike’s Better World website in 2011 marked a turning point in the way we see and use the web. The site used parallax scrolling, single page navigation, and eye-catching visuals in a fresh and exciting way. The single page layout engaged the viewer with rich, interactive storytelling and encouraged deeper exploration. Soon, a number of look-alike websites appeared on the scene, all trying to cash in on this cool, new online experience.
You may not be familiar with the term parallax, as it’s fairly new to the web, but it’s actually a technique that has been around since the early days of cartoon animation. Simply put, the illusion of depth is created by having one layer move faster or slower than another layer above it. Walt Disney’s Steamboat Willie is an early example. Later, side scrolling video games, like Nintendo’s Megaman, used the technique.
Like all things web 2.0, there are some pitfalls to look out for, such as cross-browser compatibility issues and in some cases slower load times. Before using any technique, consider your audience and the purpose of your site. For example, single page navigation would be a nightmare on an entire college website, but an admissions page or fundraising microsite could use the technique amazingly well. This Bay State College online admission’s viewbook is one good example.
The parallax trend shows no sign of fading away. With the rise of tablets and other touch screens, it’s no wonder these techniques have been embraced by so many designers.
Here are a few more examples of some stunning and effective single page websites: