Parallax scrolling is the latest technique in web design that can backfire if overused. With new technologies like HTML5 and CSS3, it’s becoming possible to create more incredible effects in the browser. These effects can be very tricky, yet, when employed in the right way they can result in a remarkable and memorable website.
Technically, parallax scrolling 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. In this post, we compiled 20 websites that employ the technique superbly.
1. Flat design vs Realism
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).”
2. Sony
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!
3. 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.
4. 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.
5. Make Your Money Matter
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.
6. Cyclemon
Some say you are what you eat; others say you are what you ride. Here, designers and bike enthusiasts Romain Bourdieux and Thomas Pomarelle came together to create parallax scrolling site Cyclemon. Teaming gorgeous illustrations, inventive typography and clever scrolling, the site seamlessly comes together.
Going from a hipster to a grandpa, a cougar to a freestyler, the guys have come up with just about every cycle type there is. And it’s not just the website that showcases the cycles – Bourdieux and Pomarelle have also created a number of silkscreen bike prints.
Each bike illustration is printed on FabrianoRosaspina white paper in five different handmade colours with a non-toxic technique. Cyclemon is definitely one for the bike-mad designers out there.
7. Lexus
Experience the new Lexus without visiting the showroom on this interactive site. The new Lexus IS is a luxury saloon car, which you can now experience in a completely immersive way before even visiting a showroom. Developed by the team at technology consultancy Amaze, this interactive video allows viewers to fully explore the interior and exterior features of the latest edition to Lexus’ hybrid line.
In order for the Amaze team to create a seamless blend between the real and virtual, they filmed the car driving through different landscapes and teamed up with high-end Munich-based 3D visualisations studio RTT to scan and take 360 degree imagery of the environment at key points. Built in HTML5, the experience works across all devices, and features as the content of an app to promote and sell the new model.
8. Life in my Shoes
Life In My Shoes is a powerful multi-platform campaign aimed at young people that challenges the fear and misunderstanding that surrounds HIV. London-based digital agency Traffic was briefed with developing a website that would appeal to a youth audience.
The brand font, Houshka Rounded Medium, was implemented using font-face to give the website a fresh look and feel. Decorative images and dramatic yellow accents throughout provide an alluring aesthetic.
The About Us page features a lively parallax effect that was adjusted for tablets and smartphones. “We wrote a media query for these devices that changes the background-attachment from fixed to scroll and sets the individual background-positions so that the images sit in the right place,” explain the Traffic team.
9. 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.
11. Neomam Interactive Infographic
Neo Mam Studios have come up with is beautifully designed and brilliantly executed infographic. An online experience built with HTML5 and CSS3, the challenge in building the infographic was to keep the CSS as simple as possible.
“The parallax scrolling effects were probably the most difficult to achieve,” says Neo Mam’s Danny Ashton. “Our developers looked at the available libraries and described them as a bit ‘wonky’, so they ended up creating their own instead.”
12. 5emegauche
In most circumstances when you scroll, you’re scrolling to a different page. But on this agency’s website, each page has its own scrolling mechanism piece or element that makes everything extremely interesting. It’s a brilliant and fun approach to parallax design and proves that the technique continues to produce inventive results.
13. Atlantis World’s Fair
An exercise in demonstrating IE9’s WOFF support, this online infographic designed by Frank Chimero uses some parallax scrolling not as just a way to present information, but as a way to animate information and to tell the story. A fun and interesting approach to interactive information, this is a perfect example of parallax scrolling.
14. Every last drop
Animation studio Nice & Serious has created this parallax scrolling site to promote the problems of water conversion. Every last drop features a quirky little character, going about his daily tasks, through which the viewer is able to learn more about how water is wasted in our lives, often without us realising it.
15. Golden State of Mind
Golden State of Mind was built by JUXT Interactive to showcase, “art, fashion and happenings live from California”. Creative director Jeff Whitney comments: “A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly.”
16. Living Word
When translation agency Living Word requested a re-energising digital relaunch, Tribe took to creating a site to stand apart from the rest. The solution was to develop a parallax effect capable of delivering a large amount of information while maintaining user interest. The idea was a brave one, but it works well, delivering a stunning, interactive and intuitive customer journey.
17. Spotify
Streaming music app Spotify explains its features and benefits on a landing page that adds a subtle touch of parallax scrolling to its background images.
18. Madwell
Design and development agency Madwell, based in New York, show off their portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.
19. The Jacksonville Downtown Art Walk
The Jacksonville Downtown Art Walk is a monthly arts festival that spans more than 15 blocks and takes in dozens of galleries, museums and bars, with street performers and live music. Its beautiful site features a subtle watercolour parallax effect that makes scrolling a joy.
20. Von Dutch
The fashion label Von Dutch tells the story of its original founder by using parallax scrolling to add an element of movement. Icons and images move into and out of place as you scroll down the page, which makes the whole page seem more fluid.