In this post, we're going to discuss how to add parallax effects to the Oxygen Builder using an incredibly lightweight JavaScript library called Paroller. This is the companion blog post to the video tutorial, so we definitely recommend taking a look at that before trying to understand this post.

The video makes it much easier to learn how to incorporate parallax effects into Oxygen Builder.

This library is only a couple dozen lines of jQuery code, and can easily be incorporated on an Oxygen Builder website in under 5 minutes and four steps. It also applies parallax effects to both foreground elements and background images. You can see examples of both in the video above.

Install Paroller

Let's talk about how to install and incorporate this parallax effect on the Oxygen Builder website. First, you need to install this jQuery plugin on your website. This can be done in a couple of ways. Perhaps the easiest method is by simply copying the script tag from this CDN JS page, and pasting it into a code block.

In the video example, we used the Advanced Scripts plug in to include a CDN delivered version of the Paroller.JS in the WP footer.

You can also create your own custom plugin enque the script, or even just paste the raw code directly into the JavaScript element on a code block.

Ensure that this library is present on all of the pages that you want to incorporate your parallax effects on. That's the main reason why we used advanced scripts, as it is inserted directly into the WordPress footer. If you are using a code block, simply add this code block to a template that is applied globally, like your header or footer.

Initialize The jQuery

Once Paroller.JS is installed on your Oxygen Builder website, you need to initialize it by pasting the following code into a code block:

jQuery('.plax').paroller();

You can change the custom class to be whatever you want, though we keep it as .plax to make things simple.

Specify Where You Want The Parallax

Next, all you need to do is specify the element that you want the parallax effect to be present on. If it is going to be a background image parallax effect, add the .plax class to the overarching section, div, or columns.

If it is a foreground element, add the .plax class to the headline, text, image, or div. If you don't understand the difference between a foreground or background element, watch the video included above which will give you a good visual description of both.

Add The Data Attributes

After including the class, specify how you want the effect to work. This is done by using data attributes, which can be added from the advanced settings tab, and scrolling all the way down to the attribute panel.

First, specify the factor, which is the speed of the parallax effect. This is mandatory regardless of the direction or type of effect. Then, specify the type of effect, whether it applies to the foreground or background. Finally, specify the direction of the effect, horizontal or vertical. If you want to change the way the effect moves horizontally or vertically, simply make the factor negative or positive.

Here's a screenshot of those various data attributes, and how they work.

If you are confused, we definitely recommend watching that video.

Save your Oxygen Builder page, and load it on the front end. Now, if you properly installed, initialized, specified, and applied the data attributes, your parallax effect should be visible. Again, this can apply to foreground elements, background elements, move vertically or horizontally, and be fast or slow.

Read the documentation, and watch the video for more information on applying this parallax effect to an Oxygen Builder background image or foreground element.

Conclusion

If you have any questions, feel free to leave them in the comments section below. This lightweight library barely has any impact on the performance of your website, is really easy to install, and easy to understand, even if you don't know anything related to JavaScript or jQuery. Simply copy and paste the code elements included above, and you should be good to go.