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.
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.
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.
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.
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.
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.