Parallax Scrolling for Web Design

Parallax scrolling was all the rage a few years ago, but designers quickly realized it has pros and cons. Parallax scrolling offers a three-dimensional look where some background elements move at a different speed or in a separate direction than other factors in the foreground. Think of a slowed down bit of video footage and then a real-time speed video in the front as just one example.

While using parallaxing for web design still has a few challenges, you shouldn’t disregard it as a viable option for grabbing user attention just yet — here are seven reasons why.

1. Parallaxing Isn’t New

The technique of parallaxing isn’t a new technique itself — Walt Disney used this technique to create movies such as “Bambi” and “Snow White.” Parallaxing appears in Mario Kart, Sonic the Hedgehog and Street Fighter. Think about the way Mario moves at a faster speed while the background scrolls more slowly, and you’ll get a good idea of what parallaxing looks like.

Every Last Drop is an example of a website using parallax scrolling to grab user interest. The site educates UK consumers on how much water people use in a typical day. The image starts with a cartoon character sleeping and a night sky in the upper header. As you scroll, the background changes, the sun rises and the character wakes up. The website shares facts along the way about water usage.

2. Parallax Is Fun

Parallax is a lot of fun for users, making your site stand out from the competition and educating consumers in a unique way. However, it doesn’t seem to impact the effectiveness of your site. In one university study, researchers discovered that while participants liked parallax scrolling, they also didn’t find it necessary to use the site.

3. Add Visual Interest

People visit dozens of websites every week, so anything you can do to stand out from those other sites makes your brand more interesting to the user. You don’t have to create an entire animation for your parallax scrolling to be effective, either. Simple changes are sometimes the most powerful.

SK Builders offers a subtle type of parallax scrolling on their landing page that effectively shows the outside of one of their beautiful homes. As the user scrolls, a horizontal collection of images of the inside of that home appear. Because of the parallax scrolling, the larger image fades away more slowly, making the outside of the home still visible as you peruse the inside.

4. Stimulate Users

The animation and sense of depth of parallax scrolling stimulate users and gets them excited about your brand. The stimulation is likely the reason why those in the research group described parallax scrolling used on websites as “fun.”

Think about the message you want for your brand. If your message is that your brand is young and interesting, parallaxing helps underline that image.

5. Grabs Attention

You can use parallax scrolling in many unique ways. The first example we looked at used a changing scene and the second a downward motion with the top image at a slower speed. You can also move images sideways or zoom in and out. So, you can utilize parallax in several ways to grab the attention of those who land on your page.

The Boat does an excellent job of taking a story, animating it and using parallax scrolling to go through the various chapters as the action builds. The animation used is minor but adds to the overall impact of the tale. Using parallax scrolling allows an author or brand to grab the user from the minute they land on their website. The site also uses sound effects to set the scene even further.

6. Leads to Longer Page Views

Your page’s bounce rate should be under 55 percent if you want an average speed, but a lot of factors play into the success of your page, including the time a visitor spends viewing your page before bouncing away.

Parallax grabs the user’s interest and encourages them to stay on your page as they scroll through the storyline. Instead of landing on your page and bouncing immediately away, the user may hang around and see where the next scroll takes them.

7. Encourage Action

Sites continuously look for ways to improve the effectiveness of their calls to action (CTAs). Your business has probably changed your CTA’s wording, color, placement and even the elements surround it. What if you could drive action with parallax scrolling so the CTA is even more effective by the time your site visitor reaches it?

Urban Walks uses multiple layers to create a parallax landing page that features the screen of an iPhone. As you scroll down the page, the background image and the cell phone screen both change, playing several elements at a different speed than the background images. By the time you reach the bottom of the page, you’re ready to download the app to your iPhone.

Show Off Your Professionalism

Parallax scrolling for web design shows your company’s professionalism and attention to detail. While it does take a bit longer to load and has a few other disadvantages, don’t count this design technique out just yet. As Internet speeds increase and screen resolutions improve, users expect entertainment and high-resolution designs. Parallax may be the solution you need to reach those goals.