Parallax scrolling web design is an approach that expresses awareness of the moment or describes the distance perception between various elements while they’re moving along the same sight line.
For instance, the things placed nearest to us in the same room appear to be more dynamic than the ones that remain in the background, and parallax is what measures the difference between them from our point of view.
Still, have in mind that despite this parallax definition, we’re still discussing an illusion that can’t really be calculated, namely something similar to a
2D animation.
Following this concept, designers tried to replicate a similar movement in their online projects and developed a trend known as parallax websites.
These websites are built using an advanced tool called parallax scrolling, thanks to which users are ‘told’ the story of that brand, and are granted the most optimal experience possible. Once the user lands on the website, he sees that some of the elements look extremely realistic, almost as if he could touch them and feel their impact.
Still, knowing what is parallax won’t really make an amazing impact on your page design, unless you’ve understood the expectations of your audience, or at least predicted their reaction to the floating elements you’re planning to introduce.
There is no unified rule teaching us how to design our parallax pages, or which parallax example to uses to convey our stories and ideas to the audience without necessarily surpassing their expectations.
Dive into our treasure trove of blogs to uncover fresh web design ideas.
The best way to go is usually the simplest one, and in this case that refers to modest parallax effects applied on small elements that draw attention subtly, as for instance pull quotes and product images. In such way, the designer keeps users focused instead of distracting them, and keeps its UX safe from negative SEO criticism.
As far as animation is concerned, there are multiple ways to implement parallax in your design:
- Raster Parallax applied to depict movement via optical illusions
- Repeat Pattern, applied with multiple scrolling displays on repeated patterns
- Layered Parallax, applied when the movement pace of the background and the foreground elements is different
- The simplest Sprite Method
Parallax derives from the Greek word for alteration parallaxis. Still, parallax effects are not new in web design. They appeared many years ago, used in the first video games as cool scrolling features. Nowadays, they are a common addition to many famous websites where the faux 3D effect (or the illusion of depth) is achieved with several backgrounds seeming to move at different speeds. It is thanks to them that users have an entertaining browsing experience.
Best practices in parallax design
When thinking of introducing parallax design on your website, the first things you need to consider are dynamic effects. However, keep in mind that you can’t obtain the same effect on old browsers, as they lack some of the new techniques needed to make parallax work.
Some of the scrolling effects will be available, but for most of them, you’ll need to do some hefty coding in order to accomplish your plan. Whatever you do, don’t avoid fallback methods, as they can make or break your design.
At the same time, it might even help to branch out from the original concept and conventional parallax tutorials: the sooner you understand what you’re supposed to accomplish, and how it can be done, the more animation ideas will come to your mind. It will be completely up to you to decide whether you want to animate your typefaces, graphic, images, or the entire overarching theme.
Most of the time, simple animations will be enough to make the scrolling effects beautiful and functional. Both shifting backgrounds and spanning graphics are simple parallax scrolling animations you can use to develop a fallback method for each browser.
The most important advice we have to give you is to keep things simple, because the line between cute parallax scrolling and an overcomplicated one is really thin.
The simpler your website is, the easier it will be for visitors to digest the content, so try not to remind them of scrolling federal laws in order to find a specific clause. Instead, stay in the safe side, and make sure they can navigate your website easily.
Few words about UX – the pros and the drawbacks of using parallax scrolling
A considerable change in scrolling speed
If you want to deliver an outstanding user experience, you must consider your web pages’ loading speed first. Be sure that both conversions and overall satisfaction rates depend on this factor, and that it is decisive for your SERP ranking position.
In order to create a ‘dazzling show’ and control speed despite animation effects, you will need a bit of CSS and JavaScript knowledge. The reason for applying external scripts is that you need to enable the browser to calculate the position of all elements displayed on the screen at any moment, which can be a demanding task for the internet connection and the browser.
Unfortunately, not even today’s technology managed to prevent animations from slowing performance, and we all know how harmful this can be for users’ experience.
Still, that doesn’t mean designers’ hands are tied: there are few interesting workouts that can minimize negative parallax effect and improve performance rates:
The ‘RequestAnimationFrame’ Callback
This is a function that informs the browser of the animation present on your website, and requests it to calculate the elements’ position before the user has actually scrolled to the animated element. This way, the animation won’t reappear each time the page is updated, and it will function considerably faster.
3D Transformations
Transforming elements using 3D methods implicates creating multiple layers and dimensions for each object where transformation ought to be applied.
A bit more CSS knowledge
The CSS needed to create the parallax effect is a generally basic and easy to use instead of JS, to keep loading speed on a maximal level.
Take the bandwidth into consideration
Yes, we all neglect bandwidth until we’re unpleasantly reminded of its importance. As we mentioned before, parallax effects do complicated website design and the way in which browsers render it and download all of those cool animations you’ve included.
Your entertaining method of storytelling may turn into a serious user showstopper, and slow down users’ internet connection to an extent where cellular networks may even refuse to open the website.
Users are demanding, and they won’t wait more than few seconds for your website to load. Therefore, you must make sure your loading times are acceptable before thinking of animated imagery.
Think mobile
Many experts will tell you that the most serious drawback of parallax effects is that they perform badly on mobile devices, and that’s not far from the truth. More often than rare, parallax effects display choppy or completely broken on mobile screens, and that’s because they were designed in a way which restricts script execution when scrolling is restricted too.
Smart designers take this into consideration in advance and plan a specific mobile-friendly version of their website which disables parallax effects the very
the same moment they’re being accessed from a mobile environment.
Instead, they display the static version of the website or enable external scripts to do the calculating part of the job so that all elements will be displayed correctly.
In order to avoid eliminating all of your parallax effects, try to limit them to interface elements only, instead of the entire canvas. This will encourage a smooth and easy transition between the static and parallax version of the website, and an undisturbed user experience.
The SEO effect of parallax design
Being completely honest, SEO experts are not the most passionate parallax fans ever, as they believe such effects can jeopardize the website’s ranking in many different ways. What they justify are usually single-page websites, where all keywords are in the same place, and won’t be affected by parallax scrolling.
The ideal SEO scenario is to have keywords displayed across all pages so that optimization professionals would be able to pay attention to your entire content. Still, running a multi-page website with parallax effects will make sense only if inbound links are properly displayed, which is why you have to make sure there is nothing to compromise the content on pages other than the landing one.
Interesting parallax scrolling ideas and popular concepts
Cute single-page parallax effects
Theoretically, single page layouts can cope with every type of parallax scrolling design, but in order to keep SEO optimization safe, you should consider streamlining your users’ experience and presenting everything relevant on the same page.
It doesn’t sound like the most creative method ever, but there are many interesting effects you’re probably not even aware of: your backgrounds can move, graphics can change, and content can become more flexible.
Background sliding
Most parallax effects are in fact background modifications which become visible as users scroll between different content blocks. In certain cases, the transition is animated, but the easier way to go is to implement few fixed backgrounds and change them each time the user scrolls past one. Basically, what you’re doing here is displaying images to make your background look dynamic.
This method of background sliding is very popular among designers, the same as hero images and content sliders. An interesting practice is also to use sliding full-screen images for landing pages, as long as you don’t let them compromise the quality of the content.
Horizontal parallax scrolling
What we discussed so far was vertical parallax scrolling, but there are also a number of horizontal motion effects you can use to make your website more entertaining. In most of the cases, they represent simple mouse scrolling interactions that take users from one element to another, such as the ones we used to make with Flash and JavaScript back in the days.
Graphic animations
As complicated as you think they are, animated graphics are nothing but extended images designers combine with scrolling effects in order to come up with odd and uncommon parallax features. What happens from a user’s point of view is that the image he’s looking at is updated while he’s scrolling, and remains fixed afterward to let him read the content.
Motion-triggered animations
This is the coolest and strangest parallax effect designers employ for outstandingly beautiful interfaces. They can be included on sliding background sites, or used independently to spice the design up. Give Batman 3D’s header image a look, and you will see exactly what we have in mind.
Users and parallax effects – is it a good relationship?
It is
Parallax scrolling entertains users and show them that you really care about their time, and appreciate the fact they visited your website. Besides, colors, graphics, images, and copies are always more interactive than static pages, and odds are good that users will remember the website.
Parallax effects are also useful in content terms – users feel your intention to engage them and to share information, and usually, end up reading posts they didn’t even plan on reading.
Finally, users like interesting and modern features, and will scroll to see what your animations are about even if they’re not really looking for information. For deliberate readers, on the other hand, your graphics will be the necessary break between long text chapters.
It is not
Movement is an exciting way to present content, but not something users will enjoy forever. As good as it is, dynamic content will keep users engaged for few minutes, after which it may become annoying and compromise conversion rates.
Another drawback we mentioned before is missing content – while certain pages or elements are present on the website, some users scroll too fast to be able to see them. A large number of animations can also confuse them, and jeopardize your intention to convey a clear and interesting message.
Speed is also a risk factor when introducing parallax effects – the more animations there are, the slower moving between pages will be, and they will certainly compromise access to information. The thing that disappoints users the most (together with irrelevant content) is content they struggle to access, so make sure they don’t have this problem.
Finally, think twice before you introduce any element. Look for the most interesting and ideally unique solutions that can animate users, and make sure they’re functioning properly
