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:

Anakin

The Anakin Design Studio website.
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.
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 with visitors.

Every Last Drop

The Every Last Drop website.
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.

Firewatch

The Firewatch website.
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.
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’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.
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 being that this story mixed it up between scrolling left-and-right as well as top-and-bottom.

Space Needle

The Space Needle website.
The Space Needle website.

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.

  • Parallax Scroll

    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.

    Interested in Parallax Scroll?

  • ScrollMagic

    If you’re looking for a JavaScript library that gives you more control over the parallax effect, try this one from ScrollMagic. With this plugin you can add scroll-triggered animations, force different elements to hold steady during the scroll, and do other “magic” tricks. Be sure to check out the examples and documentation the developer has provided for some initial inspiration.

  • ScrollMe

    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.

  • Skrollr

    Here’s another JavaScript library you can try if you want to apply advanced parallax styling to your site. The Skrollr site does a good job of demonstrating a number of the effects you can create, including the standard 3-D background illusion, text resizing, elemental scaling, color shifting, and more.

Wrapping Up

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.

Brenda Barron
Over to you: Are you currently using parallax effects on your website? If so, what steps did you take to implement it?