Parallax scrolling. A design technique that has become increasingly popular lately — and not without reason. We’ve been talking a lot about how the web has changed and how our expectations towards a website have risen. The web user of today wants to get entertained and involved. We are more than willing to engage with a website, if we are invited to do so anyway. With parallax scrolling you can do a bunch of great things to invite your visitors to engage with your site.
As usual with this kind of web trends, there are plenty of articles out there with beautiful, or great, or even awesome examples of parallax scrolling in web design. While these accumulations offer us plenty of inspiration of how to realize parallax scrolling, they don’t tell us why to use it.
The interactive nature of parallax scrolling is an obvious advantage, and so is the level of engagement that comes with it. Now let’s take a look at some websites that show us what else you can do with this great new technique. Here are 15 reasons why to use parallax scrolling in your web design.
Let’s start with a more practical advantage of parallax scrolling: It’s a vivid way to present your products. With standard web techniques — if we take aside video or flash — you were only able to show static web content. New technical advancements allow you to let your visitor interact with your site and by doing so explore your product on their own initiative.
Show your product in 3D
Let your visitors experience your product in a totally new way.
The website Bagagia is a great example of how to let your visitors experience your product in a totally new way. Instead of static images, you get a 3D presentation controlled by your own scrolling behaviour. The design is very simple, using a lot of whitespace and drawing all the attention to the unusual product: A leather covered hot water bottle and bag at the same time. The site perfectly reflects the exquisiteness of the product.
Demonstrate the benefits
Take your visitors on a journey about your product.
Ben the Bodyguard is a mobile app that helps you to protect your personal data. The app is personificated by Ben, a French bodyguard, who has made it his life’s mission to protect your data. When scrolling down the page, Ben takes you on a little journey through the ‘dangerous neighbourhood of our time’. While walking the dark streets, he explains why his job is so important. Once you started scrolling, there is almost no way to get out of if, you just have to listen to the entire story.
Add some sphere to your product
Attract attention and create a certain sphere around your products.
The Spring Summer 2012 collection site of Manufacture d’Essai parallax scrolling is used in a totally different way. Yet, their goal is to draw attention to their products. When scrolling down the page, you get to see photographs of different models presenting clothes and accessories of the collection. With every photograph, different elements fly around the models, highlighting a certain sphere that comes with the clothes.
Another concept that we’ve been talking about quite a lot lately is storytelling. Parallax scrolling offers the ideal setting to tell your story in an engaging and interactive way. Let your visitors take control and let them walk through your story in their own pace. The different layers that respond differently to the scrolling behaviour of your visitors create a sense of depth and even allow for multiple story lines.
Let your visitors travel through time
Let your visitors travel through your company history.
The digital agency inTacto uses parallax scrolling as framework for a very visual and fun presentation of their company history. Instead of scrolling down, you start at the bottom, at their launch in 2001. By scrolling upwards, you can launch a little green rocket and let it fly through outer space. The rocket passes different events, which represent different milestones in the history of the company.
Draw your visitors in
Draw your visitors in and capture them with an engaging story.
Probably my favorite example of parallax scrolling so far is an add by Peugeot for their new HYbrid4 technology: A mission in 4 modes. You get drawn into a graphic novel of a hero, who is about to “embark on a challenging mission to capture confidential data and get away safely.” When scrolling down the page, you become the witness of a beautifully illustrated and captivating story, which introduces the different travel modes of the HYbrid4 technology as a sideline. The story is accompanied by music and sound highlights to make it even more engaging.
Make your comic book interactive
Comic books now become scroll-active and digital.
Soul Reaper is the first HTML5 scroll-activated digital comic book. The story is actually based on the scrolling interacting of the reader. Instead of going through pages in a regular comic book, you just scroll through the story, initiating the next action step yourself. Like the Peugeot example, the story is accompanied by music to highlight the different scenes.
Now this one is kind of obvious, but nevertheless here are three great examples that show how to put theory into practice. With parallax scrolling, you put your visitors in charge. By doing so, they take in an active role in their interaction with your site. This active role gives people the impression that they choose to engage with your site, making them more positive and more open for your message.
Make your visitors curious
Be creative and engage your visitors.
The drink Michelberger Booze engages you as a visitor in a very creative way. At the very top of the site it says: “Just scroll down gently… When your glass is empty, click to feel the booze.” What is the booze? When scrolling down the page, you see an artistic still life setting. When scrolling further, two things happen. The watch hands rotate and the drink disappears. Then a mask appears which, when clicking on it, leads you to the booze — a beautiful, animated illustration that represents the sphere of the drink. Only at the very end of the site, you get the actual information about the drink. Still, there is almost no way to get there without engaging with the site first.
Let your visitors have some fun
Engagement can be fun and pointless at first sight.
Another great example of how to engage your visitors is the site of the KRYSTALRAE fall collection. Different outfits are presented on one and the same model. The design is very minimalistic, focussing all attention on the model and the dog in the center of the page. When scrolling down the page, you can change the outfit yourself, while the rest of the scene stays the same. This interaction is simple, but fun and very engaging.
Surprise your visitors
Surprise your visitors with an easter egg.
You can also use parallax scrolling to surprise your visitors. For example, on the Japanese website of the Nissan Note, you get an entire story about the car, when scrolling down the page. This already makes it a special experience. However, once you are at the bottom of the site, there is a link that says: “Try Reverse!” The site automatically scrolls back to the top, giving you yet another version of the story.
This might actually be the most important aspect of parallax scrolling. The fact that we get instant feedback when interacting with your site makes us more alert and more willing to continue. We scroll and something happens. We scroll some more and something else happens. This promise is very motivating and makes people willing, even eager to enter your site and listen to your story.
Invite your visitors in
All you need to do above the fold is to promise that there is more to come.
Parallax scrolling can be an awesome way to trigger your visitors to enter your site. There have been lots of discussions about whether or not the most valuable real estate of a website is infact above the fold. There is no doubt that this space is important, but only because it’s what your visitors get to see first. It’s where you need to convince them that it’s worth to enter your site. The web and graphical designer Jan Ploch has chosen for a very simplistic, yet very effective way to design his site above the fold. Basically, he doesn’t give away much, except for the promise that there is more to come if you scroll down the page.
Lead visitors to your CTA
Guide your visitors through your site and towards your call to action.
You can also use parallax scrolling to guide your visitors. You can guide them into your site, through a story, or towards your call to action. Tinke, a gadget for fittenss and wellness monitoring, makes great use of this guiding ability. When scrolling down the page, you see the device in different settings, explaining different features and benefits. At the end of the page, it leads the visitor directly to the call to action of the page: “Shop Now”.
Guide your visitors’ line of sight
Draw attention to otherwise unobtrusive, yet important content.
You can also guide your visitor’s line of sight with parallax scrolling effects. For example, when scrolling down on the site of Guy Vernes, a little character flies in from the left, drawing attention to the footer information on the right. Without the animation, this information would otherwise be very minimalistic and unobtrusive. However, the character leads the visitors’ line of sight directly to it.
The visual appearance of a website becomes more important as our expectations towards the web increase. Every company has a website nowadays and plain usability is not enough anymore to make the difference. You need to get to your visitors on an emotional level in order to stand out from your competitors.
Make your website special
Make your design visually appealing and special in order to stand out from the crowd.
With parallax scrolling you can give your site a very unique look & feel. For example, the interactive agency Unfold use it to build their site and offer a fun and unexpected experience to their visitors. Here is a great detail: Once you hit the bottom of the page, you automatically start at the top again — a seamless, never ending scrolling engagement.
Build your website on the interaction
Build your design on the interaction for a special experience.
You can also build your design on top of the parallax scrolling effect. Link your design with the engagement of your visitors to create the site itself. The creative agency Tokio Lab has a very appealing and typography-heavy website. The site builds up word for word while scrolling down the page. Without the parallax scrolling effect, the site would eventually look the same, but the experience wouldn’t be comparable.
Make your background fun
Animate your background to add that little something to your design.
You can also include parallax scrolling effects in a more subtle way to animate your background. When scrolling down on the site of the cultural consultancy firm cultural solutions, the background moves in a very appealing way. This animation has further no relevance for the site, but it brings the design to live and adds just that little something that makes the site special.
Parallax scrolling can be used to achieve many things in web design. You can present your product in new and engaging ways, or tell more vivid and interactive stories. The direct feedback that comes with parallax scrolling is engaging and extremely motivating. Guide your visitors into our site, through your content, and towards your call to action. Put your visitors in charge and make it their own choice to engage with your site.
If you want to dive into parallax scrolling yourself, no worries, there are plenty of resources out there that will help you with it. To get you started, here are some tutorials, or you might want to check out this parallax scrolling plugin for jQuery including a detailed documentation.
Do you have other ideas of cool things you can do with parallax scrolling? Then let us know in the comments below.