It's the hottest technique in web design, but can backfire if overused. Check out these great examples of parallax scrolling done well.
With new technologies like HTML5 and CSS3, it's becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.
One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. You'll find more advice in our pro tips for building parallax websites post.
But to show how it should be done, we've collected together sites that employ the technique to good effect. In some cases the parallax scrolling is the star of the show; in others it simply adds a touch of depth that makes the foreground seem to pop out a little. We hope you find this a useful source of inspiration for your next project, and if you come across any creative examples that we’ve not listed, we'd love to hear about them in the comments.
01. Alquimia WRG
HTML5 canvas is used to animate the initial loading image. Subtle "parallax elements in the homepage are dynamically created and animated to simulate a 3D space environment through mouse movement," says Andrea Bianchi, creative director at Alquimia.
The site achieves its goal, which, as Bianchi says, "was to create an ideal balance between content, usability and user experience".
The Poppy Appeal site created by the agency nonsense is one that really sticks out. A site that is strong and full of character, this charity works hard for donations, year-on-year, and this appeal website is a wonderful way to explore how the donated money is used.
The site uses illustrations and animations to educate both a young and old audience. Founder and creator of nonsense, Robbie Greatrex, says his personal favourite element on the site is the television.
Greatrex adds, "To demonstrate the life-changing work The Poppy Appeal allows The Royal British Legion to do, we designed and developed a rich, interactive experience controlled by a simple scroll of the mouse."
There are lovely parallax-scrolling elements throughout the site that will appeal to children, and the one-page site lends itself so well to youngsters scrolling on tablets, too. Greatrex enjoyed being part of the site, and says, "This project was a lot of fun. The concept really leant itself to us being able to add lots of playful 'easter eggs' for the user to explore and discover."
This latest site celebrating 25 years of the Game Boy is as playful as they come. Created by Melbourne based web developer Petr Tichy, the parallax scrolling allows you to control the Game Boy device; playing along with a classic game of Tetris, it will no doubt harbour some nostalgic feelings for all you gaming enthusiasts out there.
With plenty of projects capturing the glory days of Nintendo, the 25th anniversary of one of its most popular consoles seems another fitting tribute. You'll love this site if you've ever had a Game Boy youself.
Last year, flat design took over the world of digital design. To highlight this design trend, interactive agency inTacto created this brilliant interactive adventure Flat Design vs Realism.
"One of the principal problems was to insert the HTML5 game in the middle of a parallax scroll," explains inTacto's creative director Alejandro Lazos. "We wanted everything to be continuous and without jumps while scrolling, so the users could at any time go from start to finish without interruptions. To achieve this we utilized Ajax technology to pass parameters to the url, and the game which loads in a div, is in charge of collecting those parameters and display the corresponding loading screen (flat or realism)."
This offering from technology giants Sony is unlike any parallax scrolling we've ever come across to date. It was created as part of the company's 'Be Moved' campaign, where they state: "A journalist once called us a guinea pig because the results of our experiments were copied by others.
"It was meant as an insult, but we took it as a compliment. Combining artistry and engineering IS an experiment but when artists work with engineers, every day is a chance to be moved." Scroll for yourself and see what all the fuss is about!
06. Costa Coffee
This impressive one paper website, The Costa Experience, is the brainchild of Brighton-based agency Graphite Digital. Having worked previously with Costa Coffee, the team was recently tasked with better communicating its products.
The result was this visually rich, parallax website full of animated illustrations and interactive elements.
07. Highway One
This cool microsite, created by Newcastle agency Shout Digital, for luxury travel experts, Exsus, is another great example of the trend. Its delightfully retro cartoon scene takes you on a virtual trip along California's Highway One.
The scrolling journey seats you in a classic Cadillac Eldorado 1959 starting out in the Redwood Highway, which takes you though Fort Bagg, San Francisco, Cambria, Santa Barbra, LA, and San Diego, to name but a few. At first glance the effects look quite simplistic - but as you scroll down you'll see the site's got a few quirky tricks up its sleeve to keep things interesting.
Finance and money are hardly the most interesting of subjects. But New York-based digital agency Firstborn are quids in with this dynamic parallax scrolling website Make Your Money Matter for the Public Service Credit Union.
With the aim of teaching the public the benefits of joining a credit union, rather than using a bank, this brilliant site includes everything from how a credit union works, where to find one and apply as well as a calculator showing just how much banks profit from customer's deposits.
09. The Beast
Folk singer Laura Marling's album, A Creature I Don't Know, was given an accompanying website made by London agency Studio Juice with illustrations by Shynola. It's a site that self-scrolls as a poem is read out, while vivid illustrations and animations with parallax perspectives are revealed.
The site makes extensive use of new semantic elements and the data-* attributes used to trigger animations at specific audio cue points (such as scene changes, animation cues and so on) and also assigning control speeds and directions of the moving parallax elements.
10. The Lab
Alzheimer’s Research, the UK's leading dementia research charity, aims to communicate information about dementia in an engaging way using its website The Lab.
From idea to treatment, users can scroll through two labs and a clinic, each of which is filled with pop-up information buttons. When clicked, new pages open with details on how scientists' ideas are turned into reality and how this can make a difference for the thousands of people living with the disease.
Next page: the next 10 examples of parallax done properly