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.
Although made primarily for adding parallax effect, this tool covers many other, interesting features. For instance, you can use it to add a static background behind the text. Additionally, it helps you to add background to a specific row as well. When you want to color one paragraph by adding background, this plugin will allow you to do this with one click.
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 With Classic Editor
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.
Besides the parallax there is a mouse effect worth mentioning. Thanks to it you can create the effect of slow-motion on the image that is under your mouse cursor. The great thing is you can combine parallax and mouse effects on the same image. Just choose the one that fits your needs better, depending on your specific needs and goals.
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.
Using the Plugin to Add Parallax With Gutenberg Editor
This plugin is Gutenberg-friendly as well. To use it, click on Background (AWB) block in order to start adding the parallax effect.
As every other block, Background (AWB) block has its own options that are almost the same as those in Classic Editor.
The great part is you can add color, image or even a video to the section with parallax effect. Also, you can set the parallax’s size by adding padding, its speed or the parallax type. Lastly, Gutenberg supports the mouse effect we’ve previously mentioned.
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!