It’s a hot new 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.
To show how it should be done, we’ve collected together 25 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. The Beast
Folk singer Laura Marling’s album, A Creature I Don’t Know, was given an accompanying website made by London agency Studio Juicewith 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.
02. The Lab
.jpg)
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.
03. Why Your Brain Craves Infographics
.jpg)
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.”
04. 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.
05. Atlantis World’s Fair
The people behind the Atlantis World’s Fair decided to make a website to explain its purpose and history. They used some parallax scrolling not as just a way to present information, but as a way to animate information and to tell their story. A fun and interesting approach to interactive information, this is a perfect example of parallax scrolling.
06. Pitchfork Cover Stories
Renowned music website Pitchfork has gone above and beyond with its ‘Cover Stories’ series. Making its website look like a lovingly designed print magazine, the features include parallax scrolling, interactive interviews, video content and photography unlike any other.
Masterminded by Pitchfork’s creative director Michael Renaud, their interview with British newcomers Savages is the best yet. Moving portrait photography and video content by Se Young accompanies insightful text, whilst the music player provides the perfect soundtrack.
07. Green Man
Welsh festival Green Man unveiled a brand new website for this year’s shenanigans. The illustrations, colours and user experience combined make for a truly stunning parallax scrolling experience.
It was developed by the team at London based agency YCN Studio. Green Man approached them last Autumn, with an intention of giving their branding a good old revamp – everything from the website to the wristbands.
08. Soleil Noir 2012 | We believe in…
This wonderfully whimsical site from French interactive studio Soleil Noir was designed as a New Year’s card. It uses a simple set of coloured circles as the website navigation, along with some excellent parallax scrolling effects. Sometimes, it pays to be simple.
09. Oakley
Eyewear retailer Oakley has triumphed with this website, crafted for the new Airbrake MX goggle,which combines a cool scrolling effect with striking photography that portrays the product beautifully.
10. Jason Kenny OBE
Earlier this year, Bristol-based agency Fiasco Design developed this beautiful website for Olympic English track cylist Jason Kenny. Co-founder of Fiasco Design Ben Steers says: “In response to the brief, we decided to create a single page, vertical scrolling site utilising a parallax scrolling technique.”
11. 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.
12. 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.”
13. 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.
14. 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.
15. 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.
16. eBay
When it overhauled its design and logo, ecommerce giant eBay explained the new version of its site with a page that uses a subtle touch of parallax scrolling. The large background images remain in place while the content scrolls above it. While the effect isn’t tastefully overdone, it is definitely noticeable.
17. 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.
18. Fannabee
Fannabee is a site designed for fans of music artists to help show off what they’ve collected. The concept is introduced using a page that keeps the visual focus front and centre, while the story is explained as you scroll down. Parallax scrolling is also used subtly with the icons in the background, as the icons in the foreground move faster than those in the background to add a level of depth.
19. Peugeot Hybrid4
Peugeot has gone all out with using parallax scrolling to create an auto-playing comic in the browser. The comic plays as you scroll down the page (or use their autoplay feature which automatically scrolls) and helps to advertise the car manufacturer’s new HYbrid4 technology.
20. Cultural Solutions
Arts consultancy Cultural Solutions employs a subtle parallax scrolling effect to introduce depth to its homepage. Their main brand image is the use of colourful circles – the circles in the background move slower than those in the foreground, creating a subtle 3D effect.
21. jQuery Conference
The website for the 2012 jQuery conference made use of a touch of parallax scrolling in order to add some animation to the design. It’s the smaller, subtle effects that make the page seem more fluid, such as the logo and date becoming smaller after you scroll down. The scrolling also triggers animations – like the bicycle that starts to drift off to the right, and the flock of seagulls frantically chasing a shark – which add some personality to the page.
22. Shape
Creative agency Shape uses parallax scrolling to help explain their design process. The animation describes the flow of how they work perfectly, and adds a nice visual touch.
23. Nintendo
To help show off the launch of Mario Kart on the Wii, videogames maker Nintendo launched a page that used parallax scrolling heavily to take the visitor on a journey through the history of the game. The style of the site follows the style of the game itself, by taking you along a road lined with characters from the game.
24. Activate Drinks
Activate Drinks is a company that provides drinks with added vitamins. To help tell its story and explain its their approach is different, it’s added an element of 3D by placing bubbles in the background, middle ground and foreground. As these layers move at different speeds, the 3D effect is formed as you scroll down the page.
25. The Whitehouse’s Iraq Timeline
To display the timeline of the war in Iraq, the White House used parallax scrolling to tastefully add something unique. While the content scrolls as normal, the emotional background images remain static – which help them to stand out further.
via creativebloq.com
espaco99 