Adding Parallax Effects To Oxygen (Foreground And Background)

By James LePage
 on December 10, 2020
Last modified on January 6th, 2022

Adding Parallax Effects To Oxygen (Foreground And Background)

By James LePage
 on December 10, 2020
Last modified on January 6th, 2022

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:


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.

graphical user interface, application

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.


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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
3 years ago

Great article

The Only thing I would suggest is adding a scroll trigger, because if your element is way down the page, it will trigger too early.

Uditha Wishvajith
Uditha Wishvajith
2 years ago
I want to create my site name like this. This site has a nice and beautiful parallax effect. But I cannot do it like this. can you help me?

Last edited 2 years ago by Uditha Wishvajith
2 years ago

Just a heads up, you forgot to link the CDN JS page to the words 'this CDN JS page' in your article.

Quick Link:

Aaron S DeVandry
2 years ago

I have tried this and have been playing with it for hours. I can't get it to work. Please help.

2 years ago

1.4.7 seems to not work in oxygen

Pier Paolo
Pier Paolo
7 months ago

For those who report issues with the paroller.js code, I solved my problem (the code was apparently not working in Oxygen) by applying a very small change: put the jQuery and paroller.js block codes in top of the body or in the header instead at the bottom of the body or in the footer as written in the article.

To apply the code globally, I chose to put it in the header of my main template.

1 month ago

Is this the best way to make the parallax effect in 2024 with Oxgyen 4.8? Does un update video need to be made? I've tried to use this video to create a parallax effect but so far nothing is working.

Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram