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 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.
Want to see some other cool examples of how parallax scrolling is used around the web? Here you go:
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
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 with visitors.
Every Last Drop
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.
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
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.
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
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 being that this story mixed it up between scrolling left-and-right as well as top-and-bottom.
If you’ve ever ridden the elevator to the top of the Space Needle, you’re going to get a kick out of this website. At first you may be confused as to what to do to make this one work, so make sure to read the directions they provide in the center of the screen (i.e. “scroll skyward”). The parallax effect on this one, in turn, mimics not only the experience of traveling upwards to the Space Needle, but it also shows you the same sights of Seattle that you’d see if you were there.
Tools to Add Parallax to Your WordPress Website
If you’re interested in adding the parallax effect to your WordPress website or want to give your current one an upgrade, check out the following tools.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
For a very simple application of the parallax effect on your WordPress website, you can use this plugin. In essence, it takes any image placed behind header text and gives it a parallax scroll. This plugin won’t be able to give you any advanced parallax functionality, but it’s a good place to start if you’re just wanting to experiment with small changes.
Want to give a jQuery plugin a try instead? ScrollMe focuses on producing scroll-triggered effects rather than the 3-D movement illusion you typically think of with parallax styling. So, if you would rather create movement and resizing effects for different elements on your site, you can do that with this plugin.
Adding Parallax with Upfront
For the purposes of this example, I’m going to use Upfront since it simplifies the process and also enables you to pick and choose where you want to add parallax effects.
Here is how you can add the parallax effect to your background images:
Open the Upfront builder on your website.
Right-click on the area where you want to apply a parallax scrolling image. Hit Edit Background.
Hit the green asterisk button in the top-right corner of the image. On the sidebar, under Background Type, select Image.
Upload or select the image you want to place in this spot and apply the parallax effect to.
Back on the image editing sidebar, select Parallax under Image Type. You can then adjust the image sizing and scaling options, and apply custom CSS as you like.
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.