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.
Created and coded by UI designer Linda Dong, this site explains the fracking process beginning with a single drop of water. Given the controversy surrounding fracking, this site gives a fairly restrained explanation of the consequences, coupled with bright, friendly graphics.
Informative box-outs lead you through the fracking process, as the user is guided down into the ground then back out again. At the end of the journey you're presented with an opportunity to support the FRAC Act (Fracturing Responsibility and Awareness of Chemicals act), which aims to make fracking more transparent and responsible.
02. Savse Smoothies
From humble beginnings as a mother's unique recipe, Savse Smoothies now enjoy widespread appeal and have a legion of celebrity fans. The health-concious drinks have a suitably organic website, with graphics and images smoothly flowing into one another.
With a crisp layout and a fresh pallette, this site succeeds in promoting a healthy and aspirational image. Products are clearly laid out with individual ingrients plain to see, making these smoothies honest and appetising at the same time.
03. Rimmel London
Cosmetics giant Rimmel have a suitably amazing website to showcase their world famous fashion products. In 2013 the site was named one of the 20 best parallax websites by Awwwards, and it's easy to see why.
The smooth scrolling on the homepage not only shows off the Rimmel range to full effect, but it doesn't sacrifice the user experience in the process. Menu links are still clear and available, so if you already know where you want to go the scrolling carrousel won't slow you down.
Creative agency Whiteboard is driven by an urge to provide great work for purposeful ventures. Instead of focussing on the bottom line, they believe that a human approach to business will deliver better results for everyone. For such a forward thinking company, it makes sense that they would embrace the relatively new world of parallax web design.
With slick videos of busy team members or energetic meetings playing subtly in the background of their homepage, Whiteboard communicate a sense that their business is productive, welcoming and friendly.
This striking site, which breaks down the health benefits of different fruits, is a feast for the mind as well as the eyes. Made by Shibui, a unique group of independent creative partners, this page blends simple scrolling with dynamic, fluid animations.
The bold colours burst out of your screen, making this site hard to ignore. Coupled with clever animations, this site will have you scrolling back and forth plenty of times after you've absorbed all of the information.
06. 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!
Next page: the next 10 examples of parallax done properly