Over the last year or two you may have noticed some rather swanky, interactive websites popping up everywhere. These websites are seen across a vast variety of companies and brands, but what they all have in common is slick design, clean movement, and a distinct graphic depth. They often tell a story, or create an interactive scrolling feature – either way they are beautiful, unique and utterly enchanting.

These unique websites are designed to harness the power of parallax scrolling, to create 3-dimensional movement in a sea of flat, traditional, link-dependant websites. Parallax graphics originated in 1980s arcade and video games, such as the iconic Super Mario Bros. By moving the background at a slower rate to the foreground, parallax design creates a layered, 3D effect as you scroll through the page, which can be used to dynamically add depth, to create striking storytelling. Web developers began incorporating parallax scrolling in 2011 using HTML5 and CSS3. When applied to websites, this allows for dynamic, interactive, visually engaging user experiences.

So what are the benefits of using this type of website? Parallax scrolling allows for the creation of dynamic, unique and interactive websites, which optimize user experience. Because of the infinite scroll, you can display your content on a single page, which means you are reducing both the navigation and clicks needed for the user to consume the information. With parallax scrolling, your users follow the path which you set for them within your website. This means they can be led through the specific information that you want them to see, in specifically the order you want them to see it. This can lead to some powerful results!

There are of course a couple of concerns to be aware of though. For example, because of the heavy use of animation, web pages can take longer to load. Also different browsers react differently to parallax, and functionality and smoothness can differ between them. Furthermore the excessive scrolling required can be frustrating if the content isn’t worth it. Finally there may be compatibility issues with mobile browsing, so the effect needs to be translated to work across platforms.

In spite of these concerns, the web is awash with stunning examples of parallax, used in a wide range of ways and for different effects. Here are a few of our favourite examples which each harness the power of parallax in unique ways:

This stand-alone website by Melbourne based web developer Petr Tichy celebrates 25 years of Nintendo through the creation of an old-school gameboy, complete with a scrollable version of Tetris. This interesting website showcases Tichy’s skills by appealing to the current trend for nostalgia, coupled with the cutting edge parallax element. This website is a great introductory example of what parallax websites can do. – ihatetomatoes.net

Numero10 fantastically demonstrates the layering effect that parallax creates. We love this site for its awesome attention to detail and the gorgeous creativity. Not only are the illustrations beautiful, they are also optimised through parallax to create a striking multi-dimensional effect. www.numero10.ch

Sony has also jumped on the parallax bandwagon, by creating this slick and shiny webpage. Fixed firmly somewhere in between an info-graph, a video and an article, it’s impressive design is perfectly utilized to tell their story: “We are engineers, but we are also artists”. The flawless and smooth design is interactive – users can pause their scrolling to read the dialogue and can also click on markers within the imagery to reveal more information. This page certainly creates a huge impact, and is undeniably visually exciting. www.sony.com

From Argentinian digital company, inTacto, here is the award winning Parallax website ‘flatvsrealism’. The concept is simple: a fairytale about the King of Realist design vs. the King of Flat Design – but the execution is anything but simple. This is a seriously creative and well thought out website, which flows seamlessly through an intense and creative story, taking full advantage of the depth, dynamism and intricacies which are possible with parallax. The story leads through an initial narrative, through an interactive fighting game, and then bursts effortlessly into a real life party scene, where it is finally revealed to be a site celebrating the New Year with inTacto. This is a highly thought out, fun and impeccably executed parallax website, which really pushes the boundaries and proves just how far you can take parallax. www.flatvsrealism.com

However, parallax can also be used in a much more subtle and practical way for everyday websites and businesses. For example we built the website for our client Evans & Traves, where we included a parallax effect to add a subtle element of depth to showcase the incredible builds the company have designed, project managed and brought to life. This effect perfectly compliments the crisp, contemporary and luxury-feel of the website, which gives the company’s spectacular property portfolio the space to shine. www.evansandtraves.com

Our experts are here to help! Get in touch today to start building your perfect parallax-powered website!