2012_11_parallax_featured Design

15 Reasons Why Parallax Scrolling In Web Design Is Awesome

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.

Product presentation

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.

Storytelling

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.

Engagement

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.

Action trigger

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.

Design

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.

Conclusion

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.

23 comments

  1. Prabhu

    Good info about parallax scrolling

  2. Stuart Jones

    Check the link to Manufacture d’Essai.

  3. Olivier S

    Thank you for those superb examples !

  4. Adi

    Its true that parallax scrolling is a eye catchy technique but initially used in flash websites few years back.

  5. Sabina Idler

    Hey, thanks for giving us a heads up. I checked the link and it seems that something is wrong on their site. :/

  6. Sabina Idler

    Thanks! I looked at your site and I love it. Simple, but very effective. I’m always happy to see websites that make an effort to engage their visitors. :)

  7. Sabina Idler

    True, but now it is more accessible and therefore more popular, so I guess that’s the difference.

  8. Joy Edwards

    I like design that is titled with “Make your website special”. It will make the design really great as the images in page with the design looks great.

  9. Paul Veugen
  10. Marc van Agteren

    And another one, explaining the inception concept:

    http://www.inception-explained.com

  11. logo design us

    Thanks for the review. It will be very useful for those who don’t want to manually configure things.

  12. Chris

    Here is another great example of parallax scrolling: http://www.novamonkey.com

  13. Web designer Calgary

    Thanks for sharing this. I like most of the design.

  14. Web Design Dubai Company

    only conceptual design only matters, user just only those site where they can find new and latest design and update things. i saw creative design ability in your designs.

  15. Rohit kashyap

    Thanks for sharing about the parallax scrolling in web design. Nice information very helpful.

  16. mark

    There’s definately a great deal to learn about this issue.

    I love all of the points you made.

  17. Jesse vdz

    Great article! You make a lot of good points on why – and how – you should use parallax scrolling in your web design. I’m a big fan of parallax websites myself. It’s a good example of third wave Human-Computer Interaction: websites can’t just be functional anymore, they have to be fun, good looking, engaging, and interactive as well.

    That being said, I don’t agree with everything you’ve written here. In your post, you sum up a lot of ways parallax scrolling influences the user experience in a positive way. However, I recently came across some new research that I think you should know about. It’s a thesis about the effects of parallax scrolling on user experience, which you can find here: http://docs.lib.purdue.edu/cgttheses/27/. It’s an interesting read for anyone thinking about designing a parallax website.

    In this study, two hotel websites were designed. They were similar in every possible way, except one used parallax scrolling and the other didn’t. Test subjects were asked to use one of the two websites, and were then surveyed. The objective of the study was to find out if the scrolling technique affected the user experience in five areas: satisfaction, usability, enjoyment, visual appeal, and fun.

    Turns out, parallax scrolling is only superior in one area: fun. It also gave the website a more professional look. In every other area of the user’s experience, the normal website performed just as good. In some instances, the parallax website even performed worse: test subjects with motion sickness found the style disorienting.

    It’s just something to keep in mind when designing a parallax website. It’s apparently not the big game changer people make it out to be. So although it doesn’t improve overall user experience and preference, the researcher does write it can have substantial benefits within certain contexts, and I agree. I think it’s most useful in sites that emphasize visual elements, like the storytelling example you wrote about.

  18. Emily

    Ya you are absolutely right. A Parallax website design is really a good way to express your specialty in term of animated images or something else. I have seen a very impressive Parallax website “www.virtualvaultsolutions.com” which is totally Parallax website and looks so stunning when we scroll down the website.

    Thanks

  19. Arianna Decosta

    Yes a Parallax website design is one the latest trend in the market of website designing because of its 3D effects, scrolling etc. I really like your article on Parallax website design and would like to share with you all a website design that is also on scrolling.
    61DesignStreet.com which must be designed by a very professional web design company.

    Thanks

  20. rachna

    Pretty cool collections…. Have a look at our free Parallax scrolling website template at http://blog.entheosweb.com/freebies/free-jquery-parallax-scrolling-website-template

  21. marketing goals

    There is certainly a lot to find out about this issue.
    I really like all the points you’ve made.

  22. Binju Paul

    Do you have any opposite scrolling parallax design? half portion scrolls upwards and half downwards.

  23. madmag

    i have to do usability testing with real users using a parallax webpage, which explains the process a company follows to do some work. apart from testing if the business objectives are met,
    - are there any particular aspects of the parallax technique to test whether it has been developed properly and delivers the desired user experience?
    - Should I let the users scroll the page through first and then ask them to perform tasks or should I start with tasks from the first moment?
    - Should I give them to do tasks, timely ordered based on the story, or should I shuffle them?

Leave a Reply

Your email address will not be published. Required fields are marked *