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.
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.
First, select the background type. In this example, we’re going to use an image.
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 .
After that, select the parallax effect. We’re going to go for Scroll. You can set your desired scroll speed here as well.
The dimensions and the height of your parallax image can be set under the Styles tab.
Finally, click on the Insert button.
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.
Go to your website and check the post or page you’ve just added parallax to see if everything is working properly.
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!