A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and get your free copy of WordPress blogging checklist 2019

Learn How to Add a Parallax Effect

Learn How to Add a Parallax Effect

So, you’ve probably noticed many websites have this cool effect where everything on the page seems in 3D, like the elements on the page are floating? This illusion of depth is created thanks to something called parallax. It is based on the illusion we sometimes get while observing things. The speed at which the observed objects are moving depends on our point of view. The ones closer to us appear to move faster than the ones that are farther away. In web design, we can make use of this illusion by assigning different speeds to different objects. For instance, if we make the background move slower than the objects in the foreground, the whole thing will have this amazing realistic, floating feel.

This effect has been explored and exploited a great deal in video games and later in web design. Today, it is a widely used technique that you can implement on your website, if you want.

In this article, we’re going to show you how to add a trendy parallax effect relatively easy and in just a few steps.

Adding a Parallax Effect Using a Plugin

For beginners and intermediate users, the best way for adding parallax is, by far, to use a plugin. There are so many excellent parallax plugins on the market and most of them do an excellent job at helping you add parallax to your WordPress website. For the purposes of this article, we’re going to use the Advanced WordPress Backgrounds plugin.

Installing the Plugin

First, you’ll obviously need to install and activate the plugin the usual way. The first thing to do is to go to your backend and look for the plugin. Click on Plugins and then on Add New. Type Advanced WordPress Backgrounds in the search field and, once you’ve found it, click on Install. When the installation process is completed, click on Activate. Your new plugin should now be listed in your Plugins menu.

Advanced WordPress Backgrounds

Using the Plugin to Add Parallax

To actually add parallax, go to the page or post where you want it added. You’ll notice a new button in your editor. Hovering upon it will reveal it says Advanced WordPress Backgrounds. Click on it and reveal a popup in which you will set different values and change the settings for your parallax effect.

Add a Parallax Effect

First, select the background type. In this example, we’re going to use an image.

background type

The next thing to do is to select an image you want to use. For a full-width image, check the box that says Stretch .

Parallax Effect

After that, select the parallax effect. We’re going to go for Scroll. You can set your desired scroll speed here as well.

Scroll image

The dimensions and the height of your parallax image can be set under the Styles tab.

Parallax Size

Finally, click on the Insert button.

Insert scloll image

The following shortcode should now appear in your editor:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]
Your Content Here
[/nk_awb]

You will need to replace the words “Your Content Here” with your actual content (text, image, video…). Don’t forget to click on Save.

Parallax Plugin

Go to your website and check the post or page you’ve just added parallax to see if everything is working properly.

Conclusion

As you can see, adding a parallax effect (the most common one is scrolling) is rather easy, thanks to this excellent plugin. There are tons of amazing parallax WordPress themes in which this effect is already included and you don’t have to do much about it. However, that’s not always the case so it’s definitely a good idea to be able to add parallax by yourself.

If you have already used a plugin to add parallax scrolling, or you prefer other methods, let us know in the comments below!

We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply