What is parallax scrolling? A brief history
Parallax scrolling is an effect that is used in computer graphics to create the illusion of depth for 2D scenes by moving background image layers slower than the foreground layers. The earliest use of this technique was actually an innovative approach to traditional animation methods created using what was known as a multiplane camera by Disney and first appeared during the 1930s.
Various versions of the multiplane camera or the likes of one were used in the past, the earliest being German film director and the foremost pioneer of silhouette animation, Charlotte "Lotte" Reiniger’s creation that was used to make her seminal film The Adventures of Prince Achmed in 1926. In fact, Reiniger is credited to have devised the first form of a multiplane camera.
Sometime later, the designer of Mickey Mouse and Disney Studios animator Ubbe Ert Iwwerks invented what was the first multiplane camera, using moving layers of flat illustrations made from old Chevrolet parts to face a horizontal camera. This camera was used in the making of several animated films by Iwerks Studio in the early and mid 1930s.
Another example, though technically miles apart, was the Fleischer Studios' Stereoptical Camera or Setback, which used 3D miniature sets in front of a horizontal camera. This camera was used in the making of such iconic animated series as Betty Boop and Popeye the Sailor.
However, the most famous of all was the multiplane camera that was developed by American inventor and audio engineer William E. "Bill" Garity for Walt Disney and which was used in the making of Snow White and the Seven Dwarfs in 1937. This camera could use as much as seven layers of artwork, which were shot as single frames under an adjustable vertical camera.
The biggest reason why Garity’s camera finds a more prominent mention than its predecessors was its technological superiority over them, sometimes requiring as many as dozen technicians to operate it when multiple layers were involved in the shooting.
Some of the most famous Disney films, including Pinocchio, Bambi, Cinderella, Alice in Wonderland, Peter Pan and The Jungle Book were made using this camera. Watch the YouTube video below to find out how the camera worked, as explained by the Man himself.
Source: youtube.com
By the early 1980s, parallax scrolling found its way into the world of video games. Moon Patrol, a 1982 arcade video game developed by Japanese game console developer Irem was the first ever game to feature full parallax scrolling in side-scrolling games. Although, just a year before, arcade game Jump Bug had used a limited version of parallax scrolling in its main scene, reason why Moon Patrol walked away with the real credit.
Source: nintendolife.com
Parallax scrolling in web design
A blog post from web developer Glutnix in 2007 is regarded as one of the earliest examples of parallax scrolling in website design. In the blog post Glutnix used JavaScript and CSS 2 that were compatible with Internet Explorer 6 to share a demo and example code.
Of course, it took a while (four years to be precise) and the release of HTML5 and CSS 3 before web designers warmed up to the idea of using parallax scrolling in their work. Those that were in favor of this effect attributed the rationale behind their choice to an improvement in user experience and engagement with the websites that adopted it.
This claim has, however, been debunked by a Purdue University study in 2013, the results of which revealed that even though parallax scrolling did enhance certain areas of user experience, “it did not necessarily improve the overall user experience.”
Nevertheless, the trend of using parallax scrolling in web design picked up and pretty soon a lot of websites were seen using this technique. The fact that users could be engaged to brand stories made marketers and companies sit up and take notice.
Benefits of using parallax scrolling in websites
The use of parallax effects has been a popular practice in video games for years. The goal was to give players a more immersive experience during playtime and to allow them the ability to see depth, while also keeping it creative by throwing in individual animations that could be manipulated in different ways on each side.
The same objective seems to be in the mind of website designers who began using this technique, hoping to deliver an original brand message as well as give their sites some much needed creativity because people were tired of looking at the same old flat webpages all day long. But, does parallax scrolling deliver any real benefit for marketers who want to make some serious impact through their business websites? Let’s find out.
1. It’s good for brand storytelling
It's no secret that effective storytelling is one of the keys to successful branding. Websites are designed with the goal of communicating a brand message and telling an engaging story about their product or service, making them perfect for stories like this.
Parallax effect can be a clever and engaging way to tell your website's story. Designers can use the interactive capabilities of parallax scrolling to offer users an immersive web experience, one in which they can quite literally find all the information they need in one single page instead of browsing through several pages.
Not only does that manage to captivate user attention from start to finish, but it also has greater visual appeal than static images because it reacts when the user scrolls down and moves over certain areas on the page. The movement causes images or video clips to flip over and around each other much like how illustrations appear on traditional flip books.
Source: http://porschevolution.com
2. It can help you make the right impression
Web design is all about creating unforgettable experiences for the users and this includes making the website stand out enough to leave a strong imprint in their minds. Designing for web browsers has become an art form in itself, with each site having its own unique identity and flavor.
But it's not just about looks; there needs to be something more than what meets the eye here if we want people who visit this page or app regularly enough to remember us years down the line without effort. The key to designing for memorability? Holding the right answers to the following questions:
How easy does everything feel while browsing your website/app on different devices? Are fonts carefully chosen so readers can read them comfortably no matter which screen size they have chosen?
3. It lets you showcase your creativity
Parallax scrolling is the perfect way to showcase one’s creative range as a digital expert. It tells stories that are both informative and engaging, which can make it more convincing than simply telling someone what skills you have to offer up front.
If I were looking at portfolio examples of this technique like those found on creative portfolios online, then seeing how well-done they are would give me faith in believing everything else that speaks about their credibility too.
4. It can push users to action
Parallax scrolling is one of the best ways to display information without cramming up your audience's display space. It also has the added benefit of providing visually compelling images that are sure to prompt users into action, especially if you present them with a creative flair.
What is a better and visually more appealing alternative to reading long lines of plain text that keep continuing as you scroll down? Interactive images or videos alongside texts. That’s like saying half of the things you meant to say through those boring texts with engrossing and fun visuals. And that’s how you nudge a visitor into action instead of boring them out to a hasty retreat.
Source: spinxdigital.com
5. It improves average time on page
Reducing bounce rate and improving average time on page is one of the biggest challenges for a website owner. With parallax effect on your website, you have a better shot at bringing down that bounce rate you’ve been troubled with and keeping your readers engaged on a page for a longer period.
A website’s success depends on its ability to keep readers on the page - for as long as possible. A well-designed parallax animation can help achieve this goal by making the content more engaging and visually appealing than traditional websites with flat designs or images that don't move when clicked; in turn people will stay longer for more information about what they're looking at.
As for the conflicting opinion citing heavy animation-laden websites as a big reason behind downward spiralling site rankings, I say visually unappealing sites can have the same effect on your site rankings too. So, better to work around an impressive looking site and improve loading speed rather than go with a drab website, eh?
Where parallax fails
Just like most design novelties, parallax too comes with its fair share of pitfalls, which shouldn’t really come as a surprise though. After all, nothing is perfect, right? Anyway, let’s look at some of the most glaring disadvantages that it poses to websites that incorporate it.
1. Slows down page loading
There has been a lot of research into why some users struggle to load websites quicker or, more simply, why some webpages take longer to load. Turns out, one of those causes is parallax web design, which can be a pain for many and the cause of some frustrating moments on your site.
They can make browsing really slow, because each time you scroll down there is an element that needs manipulation in Javascript or jQuery, which results in longer load times. It might not seem like much but these small things add up when people have to wait around before they go anywhere else with their day-to-day activities.
With this problem becoming more apparent than ever before Google released what is known as PageSpeed to help website owners analyze and monitor their website’s performance to make it load faster using the recommendations that are thrown up there.
2. Blink and miss
In your head you might be thinking that you’ve got a really cool website with some equally cool images on it, and the speed of parallax animations matches up just as well. But did you stop to think that too fast of a scrolling can cause problems when people don't get a chance to read the text properly, especially if they're scrolling for information above what you want them to see?
Animated text can quickly become an overlooked element on your website if it isn't placed above the fold. When users are scrolling too fast, they may not have time to read everything in detail before their screens scroll again with more content below them.
A lot of website visitors prefer that all of this information be visible at once. Causing web browsers to do unnecessary scrolling often gets old quick.
Source: nngroup.com
3. Not the best for mobile devices
The inability to make your website mobile friendly can really be frustrating. It's even worse when it won’t load all the animation and the user is left with an unplayable video or broken page, which looks terrible in today’s market.
Website responsiveness is a must-have these days. Visitors on mobile devices deserve to be able to experience your website the same way desktop/laptop users do. Unfortunately, not all parallax websites are responsive, which can make using their site difficult for those who are browsing on mobile phones.
Not to mention, the small screens of mobile phones literally make it a huge challenge to view the full parallax effect in all their glory when your thumbs (some just too big) come in the way while holding the phone. More like an irritant, but an issue that parallax website owners would face nonetheless.
4. The SEO complex
I'm sure you must have seen that parallax web designs do look fantastic. But don't let the wonder of this style distract you from one major drawback - it can be really bad for SEO.
Instead of creating more inner pages to distribute the information strategically, which is what most sites would do in order to rank higher on search engines, your single page parallax websites would now face a huge challenge to optimize and rank better.
That’s because you’re now going to be left with a weak SEO drive that’s besmirched with several H1 tags, insufficient or zero meta title and descriptions, and worst of all, you’re now almost at the sole mercy of organic search. You can still work around with the parallax vs SEO issue by following this simple but important guideline.
5. It can be overwhelming
Parallax scrolling is one of the most common animation tricks in web design. It can be used to create an interesting effect, bringing life and motion into otherwise flat content like images or text blocks.
Interestingly, it is also known to be hard on your eyes, which can make reading a little too fast for comfort for some people - even nauseating you could say. This happens because parallax moves background layers at different speeds than foreground layers.
So, when you (your eyes) move further away from an object with parallax activated this creates a depth-like impression by making viewers feel like they are moving along side whatever's being viewed while experiencing layered effects against their retinas.
I don’t know about you, but even describing and visualizing that exercise makes me somewhat overwhelmed. How about you just read this small piece on usability issues that parallax websites face to read more about what I’m trying to say?
How to make parallax design work for you
Despite the bag of advantages and disadvantages that parallax scrolling carries with it, you shouldn’t be discouraged from even trying it. You can still make it work if you follow certain steps that would ensure that your parallax website isn’t crippled by the challenges, if not completely immune to them.
Adapting to the demands of parallax scrolling can be difficult, but it doesn't have to create problems. With proper design and developer collaboration in place there are many ways you could avoid common pitfalls when using this effect on your website or app experience.
The following are some practical tips for incorporating parallax scrolling effects into your website while sidestepping the challenges that are thrown at you.
1. Monitor the loading time…at all times
As you are already aware, slow page loading can have an adverse effect on search engine rankings and your website traffic if not taken care of immediately. Though not as common, parallax scrolling is also a heavy CSS/JavaScript-based animation, which means it may take longer for your browser to complete its actions than other styles of navigation might do.
The inclusion or exclusion from Google's algorithm all depends on how quickly they are able to fully render each web page meaning faster webpage loading indicates better quality content while slow loading results in lower site ranking. Hence, it's extremely essential that you take performance into account when adding such heavy effects.
I know it sounds easier said than done, but since we want to see you succeed, here’s a useful guide that can help you score 100% on Google’s PageSpeed Insights.
2. Know when to use parallax scrolling
Parallax is a safe bet for websites whose target audience are users that visit and browse sites without a predetermined objective before stepping into your website. In such instances in fact, parallax can actually do wonders for your brand by telling your brand story in captivating fashion or even lending character to its identity.
Although, just to clarify, it works best for landing page sites or websites with fewer and relatively smaller pages. Can’t say the same thing for eCommerce website because bigger sites may not require such attention to detail from designers who work within them already.
The right design will make visitors want to come back again and again, even if their tastes have changed. Animation can be a great way of increasing engagement on your site, but it's important not only to know what type you should go with but also how often or fast the animation should happens, so people who visit for reasons other than using new content won't get bored easily.
Casually speaking, if you want returning visitors, parallax scrolling may not be a good idea because it can become repetitive for someone who has already seen it before, plus it would just eat into their valuable time with all those effects. Not just that, some people may actually find those animations a distraction from what they set out to do.
It would be wise to use parallax effect judiciously and only when it doesn’t pose as a hindrance to achieving your business goals. In case you’re still not convinced, read up on the perils of using website animation without thinking it out.
3. Ensure smooth team collaboration
Parallax scrolling can create some pretty snazzy effects when implemented correctly but there are always trade offs involved, namely timing issues between animation sequences being created by developers & designers that have differing priorities.
There is really no other way to deal with this than age-old wisdom of teamwork. In order to use this technique properly, designers and developers must communicate effectively so that they can avoid mistakes such as bad timing or misunderstandings about how something should work.
Here are five principles to ensure a better designer-developer collaboration that you should definitely follow.
4. Make your design user-friendly
Every design, no matter what form, should fundamentally center around user-friendliness. Parallax scrolling is no different.
It is a fun and engaging way to show off your website's content. When designed correctly, it can be very intuitive for users who are used to navigating through traditional websites with fixed speeds when they scroll up or down the page without any interruption in between the elements on screen.
You may try to be as innovative as you want, but at all costs, do not let your website ride roughshod over the expected up-down scrolling patterns of the use in a blatant and nightmarish usability practice that is scrolljacking. You want your website to enjoy user engagement and loyalty - hand over the scrolling control to them.
5. Make your design accessible
I’ve written in the past about the importance of ADA compliant websites and website accessibility. This practice takes up even more precedence when it comes to parallax website design.
That’s why I believe it’s important that you’re aware about the risks you might be taking when you design a parallax website. These risks are:
- When text is on the top layer over the background image, it can be hard for users to read, especially when the text and background colors don't blend well.
To avoid this problem always test your designs for both legibility in the layout as well as good color contrast before releasing any information online. This reduces the risk of visual interference so there isn't any confusion about what goes where. - If your website has animation effects that are too fast, it can literally be a blur for those that are prone to motion sensitivity and attention-deficit disorders, even pushing them to pass out or throw up. That’s like a huge no-no in UX design if you ask me.
You want to play it safe - offer users the function to turn off the animated effects on your website, which is a win-win for both you and those users.
Source: zeldman.com
Conclusion
The right animation can make all the difference between being seen as an innovative company or just another one in a long line of wannabes. Fortunately or unfortunately, parallax design still comes with the same or more set of perils and unpredictability as always.
Fortunately because you can learn from the past mistakes of those who were unaware of the risks, and unfortunately because it’s always unpredictable how users will react despite you taking all the precautions to avoid the mistakes others made.
For our part, we can only iterate that user experience should be both intuitive enough that anyone can find what they’re looking for quickly without being disrupted while still offering interesting features that will keep visitors engaged long enough to convert them into loyalists.
Also, we can share a list of 30 websites with the best parallax scrolling effects that you would find anywhere on the internet today. That, plus we can always offer our rich experience in web and UX design to help you implement smart parallax scrolling on your business & marketing websites anytime you’re ready to reach out to us.
0 Comments