A Quick (and Inspiring)...
WPMU DEV Logo A Quick (and Inspiring) Guide to Adding Parallax to Your WordPress Site
Brenda Barron Brenda Barron – August 3, 2018
A Quick (and Inspiring) Guide to Adding Parallax to Your WordPress Site
Parallax scrolling is something we commonly see in modern web design. Why? Because it gives the illusion of movement and depth, which, when paired with an otherwise static and long scrolling site adds intrigue and excitement—perfect for when you want to grab your visitor's attention.
For those of you thinking, "What about all the other stuff that helps attract and maintain our visitors' attention?" You're right. You could add video. You could give your site an illustration-inspired facelift. You could even condense all your high-quality photos into an eye-catching slider.
There are a plethora of ways to hook your visitors and inspire them to stick around a little while longer. But if you don't have the resources to create a video, don't feel that illustrations work well with your site's aesthetic, or don't have images to show off in a slidedeck, then a parallax effect might be the perfect way to wow your visitors.
An Introduction to the Parallax Effect
You've seen the parallax effect before. You scroll down a page and it looks like the foreground of an image is holding steady as the background glides past. It's a 3-D illusion created by moving different elements of an image at different speeds.
The parallax effect, or parallax scrolling, in web design features layered images that move at different speeds, creating the illusion of depth as you scroll down the page, kind of like a faux-3D effect. Usually the background moves slower than the foreground. The technique uses scrolling to reveal new content and works similar to one-page sites where all the content is on a single page.
It's a cool effect that can turn an otherwise boring looking website into something fun and exciting – and even a bit sexy.
The term parallax is derived from the Greek work parallaxis, meaning alteration. Nearby objects have a larger parallax than more distant objects when seen from different positions, so parallax scrolling can be used to determine distances.
Want to see some other cool examples of how parallax scrolling is used around the web? Here you go:
The Anakin Design Studio website.
At first glance, the Anakin Design Studio site looks like it's going to have the typical parallax scroll. You scroll down past the hero image and, sure, that's a nice enough effect, but it's nothing special. Then you scroll down a little further and watch as they make use of cutouts infused with a parallax effect. Now, that's cool.
Anton & Irene
The Anton & Irene website.
If the first thing you do on the Anton & Irene site is to hover over the two masked figures at the top of the home page, you'll no doubt be entertained. Once you start scrolling, however, get ready to experience another surprising engagement as the two figures part and reveal details about the company. As you continue to scroll, you'll notice that the scrolling also triggers different bits of information and images to slide into the screen. This is a great way to leave a lasting impression on visitors.
Every Last Drop
The Every Last Drop website.
The parallax effect on the Every Last Drop site serves as a sort of storytelling mechanism. As you scroll further downwards, infographic-sized bits of information shoot in to provide the setting while our protagonist takes us through his day of water usage.
The Firewatch game website.
This one demonstrates a very simple parallax scrolling effect, but it's beautifully executed. They take a striking visual that looks like it could come straight out of an animated film and use the scroll to keep visitors engaged long enough to reach the trailer for the Firewatch video game.
Jess & Russ
The Jess & Russ website.
Ever been to those wedding announcement websites and felt the urge to quickly hit the "Back" button? Well, this is not one of those. The Jess & Russ wedding announcement site uses the parallax scrolling effect to establish not only a moving timeline effect, but to also spice up the entertaining illustrations they've created to go with it.
La Moulade
Creative studio La Moulade's website.
Creative studio La Moulade took a common design technique like parallax scrolling and used it in a way that was unique to their brand. In addition to using the scroll to move text and images out of the center of the screen, take note of what happens to their navigation when you scroll further down the page. The line beneath the small navigation bar fills up, letting you know where exactly you are at all times.
Make Your Money Matter
The Make Your Money Matter website.
This particular website, Make Your Money Matter, gets regular shout-outs because of its use of a number of innovative design techniques: illustrative design, transition pages, animations, and now the parallax effect. This one is similar to Every Last Drop in that it uses the scroll to trigger a storytelling effect. The main difference here is that this story mixed it up between scrolling left-and-right as well as top-and-bottom.
As you aim to find new ways to make your website stand out from the crowd and gain the attention from visitors it deserves, I'd urge you not to feel like you need to do anything drastic. Sometimes something as simple as applying an attention-grabbing parallax effect is all you need to get just a few more seconds from your visitors before delivering that undeniably attractive call-to-action.
Over to you: Are you currently using parallax effects on your website? If so, what steps did you take to implement it?
Brenda Barron
Brenda Barron Brenda is a freelance writer from Southern California. She specializes in WordPress, tech, and business and founded WP Theme Roundups. When not writing about all things, she's spending time with her family.
19 Attention-Grabbing WordPress Parallax Themes and Plugins (2022)