Traditional thinking in thefield of web designheld that your website should be designed in a way to minimize the need for the user to scroll and to keep the most important information "above the fold."
Web users have become accustomed to scrolling down the page to get that absolute last piece of information. Google also prefers websites that have longer session durations, and one of the more likely ways to accomplish this is to entice visitors to scroll by creating unique experiences.
Incorporating parallax scrolling also can help you accomplish and solve a variety of goals such as:
Immersing your visitors into unique experiences
Drawing action to CTAs or forms
Providing natural movement to otherwise inanimate images
When executed accurately, the application of this technique should be something the average user wouldn’t be distracted by or notice. It should only help aid in any larger goals you want you website to accomplish.
But before we get too into far let's take a step back and actually review what parallax scrolling really is.
What Is Parallax Scrolling?
Parallax scrolling is a special scrolling technique used in web design where background images throughout a web page move slower than foreground images, creating an illusion of depth on a two-dimensional site.
It is one of the most used design techniques in web design right now, but also something you probably don’t even realize you have already experienced.
It is a simple motion that you are already accustomed to and it’s helped make many websites feel dynamic and interactive.
If one chooses to use this though, it's important to brainstorm how parallax could also affect the mobile experience. To increase site speed and not infringe too much on mobile usability, it's typically advices to either reduce parallax scrolling, or remove it entirely.
Remember to think of all instances where you may want to use it first and how it needs to be adjusted for users across multiple devices.
35 Sites That Got It Right
Because parallax scrolling can be utilized in a variety of ways, there’s no shortage of examples to inspire you.
It's easy to go overboard with parallax scrolling to the point where it feels too much movement is taking place, but there are websites that know how to execute it properly.
The following examples do just that and have incorporated parallax scrolling in a way that makes sense and adds value. Some utilize the technique to the extreme, while others have employed it to add to the user experience without any potentially overwhelming effects.
Flixxo brings their website to life not only with their animations and 3D graphics but also with the motion of text in each section. Because the background has such a seamless effect from one section to the next, the parallaxing text helps notify the user where each section is broken up.
EdenYale has applied parallax scrolling on each design shape placed on their site pages.
These deliberate elements help uphold the design aesthetic they want to keep consistent for their brand. The one color and slow movement of the background also makes it feel as if there is more on the page, making them want to scroll.
Building the Future, a conference by Ativar, repurposes has the conference information parallax scroll down the page over a vertically positioned version of the conference title. Once users figure that out, this helps the user identify how much longer they need to scroll to not only hit the end of the conference name, but also the end of the pages content
The dotted background also moved drastically when you move your mouse, offering some interactive fun if you weren’t already drawn the bold colors the site has.
Cooper Perkins might be a small site, but that doesn't stop them from applying parallax to their website. On a couple pages, they use large hero graphics that ‘reveal’ the rest of the page under it after scrolling.
The small statistics throughout the image collage also use parallax which helps them stand out.
AlliencePlus serves as a great example of showcasing how critical non-stock photography is in painting the picture of your employees and clients.
It uses parallax scrolling to scroll particular images down the page with you that eventually stop in a section further down. It makes users want to continue following them to see where they will end up.
My favorite use case of parallax on the site is their testimonials which are controlled by scrolling of your mouse on the job page.
I fell in love with this section of Centros site (and found myself finding reasons why I might need a new bike too).
As you scroll, the page takes you through many of the bike’s features by zooming and enhancing those sections so you know exactly what makes this bike as amazing as it's described to be, all using parallax.
TEDx Bethesda plays with the theme of being the visionary and imagining things that are beyond the norm or ‘out there.’
To mold that theme, they placed the content and other images on the homepage page atop of a outer space/dotted pattern. To add to that, those images and text even move slightly depending on where you move your mouse on the page.
Canatal’s homepage is broken up into numbered sections that help explain some key components that differentiate the company.
As you scroll though the site, sections and images associated with them scroll or grow into view. The gravitas of these sections also make it feel like Canatal really wants to celebrate the three areas they highlight.
La Phrase 5’s site is composed primarily of smaller, more contained geometric shapes and circles with text and images within them.
Each of these sections moves at different speeds, overlapping one another in the process. The style is very reminiscent of ones you’ll see more commonly in print design and nicely sections off parts of the website.
The Scrollino® is described as an “innovative device to read continuous printable editorial or book content.” Although there are a few videos that show how the product can be used, there are also other animations of the product on the page which trigger from user’s scrolling.
Devine Vineyard has some stunning images of its vineyard and products prominently positioned throughout the website.
What really adds to the display of them is how the images are shaped non-geometrically and have very distressed edges. The parallax scrolling on the images brings even more focus to them as they tell the story of their wine and spirits.
On their homepage, UBank uses parallax scrolling to show the various types of interfaces you might encounter using their application. As you enter new sections and the subsections within each, the images will change depending on the content that's highlighted.
It almost feels as if you’re being taken on a tour of how the product can be used.
NeaMedia is a company that works to create 3D sculptures and figurines for a variety of different purposes. So it only makes sense for them to get up close and show their work and detail that goes into them.
To accompany that, NeaMedia uses parallax on all of there images to add emphasis and attention to the incredible work they do.
Using 3D animations, shapes, and parallax, Loaded elevates the experience on their site by making many of the initial graphics you see move in a variety of ways. Their choice of using red and black tones also bring up the energy and excitement of the page.
NooFlow truly believes their product is going to be the solution to amplifying your performance and knows its website needs to be able to represent that. To achieve this, NooFlow parallaxes pictures of the product, ingredients, or pill depending on the page you are visiting.
Packwire has a variety of box sizes you can use to create the perfect box for whatever you may need it for.
The homepage features a few of the options in the hero area and animates as you scroll into a different position that reveal descriptive text as to what each box is called, and the featured they offer.
Have you ever wanted to go back in time and be reminded (or learn) what the web used to look like and how it has progressed? Look no further than WebFlow's site.
They take you on a journey through the history of the web, parallaxing a variety of elements that transition into modern-day design as you get closer to the bottom of the page.
So What Do You Think?
Parallax scrolling certainly offers a variety of advantages to the user experience and may even help better attain some of your website marketing metrics when executed properly.
But, the technique also isn't for everyone. Depending on you target audience your users may find the effect too distracting or even annoying, so many sure to test the effect on a smaller scale and receive feedback before proceeding with any large scale UI changes for this.