Note: This article addresses parallax for elements in Oxygen. If you're looking to apply parallax to background images in Oxygen, read this article instead.

Parallax, where two elements move at different speeds to create a neat effect, is something that is missing from the native Oxygen Builder.

This effect has become standard within the web design community over the past few years, and is commonly included on many page builders and WordPress themes. If you're looking to add parallax directly from the Oxygen Builder, you'll be disappointed to know that it doesn't include it in its native installation. However, there are some easy ways that you can incorporate parallax scrolling effects into your Oxygen website quickly and easily.

In fact, because it's not baked into the builder, you can take advantage of the full range of settings that come with the raw JavaScript library. Even better, using the code block (or code snippets), incorporating parallax effects into an Oxygen Builder website is fairly simple and easy to do.

Let's take a look at a couple of methods that you can use to add parallax to individual elements within Oxygen Builder.

How Will We Add Parallax To Oxygen Builder Elements?

There are a bunch of ways that you can incorporate the parallax effect into a website. These range from complex JavaScript libraries, to lightweight installations, to raw CSS. Each comes with its own pros and cons, but we will be using a JavaScript library called “Rellax.JS” to add parallax to Oxygen.

Take a look at this page for an example of what you can do with this parallax library.

The reason we're using it is because it is lightweight and uses vanilla JavaScript making it easy to incorporate into our site. It's also very powerful, and well documented making it easy to use even if you're not familiar with JS.

How to add the Rellax.JS to Oxygen?

There are a couple of ways that you can Import the library into your WordPress site. You need to do this before adding the effect to specific sections and elements.

In this tutorial, we will simply be using a code block which is a standard component in Oxygen. You can also use Code Snippets to inject it directly into the <head> of the site, which is probably a better option if you're looking to make use of this effect in most pages and posts.

To add the script, we will be using a public CDN to deliver the library to our website. We will add a code block with a script tag to our Header & Footer template (applying it to all pages on our website). Here's the tag that we will add to the HTML section of the code block:

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>Code language: HTML, XML (xml)

Using another HTML script tag or the JavaScript section of the code block (that's what we're doing), add this single line:

var rellax = new Rellax('.rellax');Code language: JavaScript (javascript)

This is the only JavaScript that you need to incorporate parallax on your Oxygen Builder website. What it does is applies the entire library to the specified class. In this example the class is .rellax, but you can change it to be whatever you want.

Once the script is enabled, it's easy to add parallax to any element in Oxygen Builder. Simply apply the class .rellax to it. You can also specify the speed of the parallax effect using an attribute called “data-rellax-speed”. With Oxygen Builder version 3.5, it's easy to add attributes.

Specify the speed by adding a number between -10 and 10, -10 being the slowest parallax movement, and 10 being the fastest.

Here's an example HTML markup of Oxygen Div with a fast parallax effect applied:

<div class="rellax" data-rellax-speed="-3">
  Slow and steady wins the race
</div> Code language: HTML, XML (xml)

And here's a visual example:

I’m slow and smooth

I’m super fast!!

I’m extra slow and smooth

Despite being so lightweight, the rellax.js library comes with some special features. For example, you can disable vertical parallax (which is the default setting) and turn on horizontal parallax:

Instead of making the parallax scrolling effect dependent on the positioning of the <body> of the page, you can set up a custom wrapper element. This is helpful if you are looking to only apply parallax affects respective to the positioning of a specific section in the page.

Conclusion

This article should have showed you how to easily add a parallax effect too individual elements in your Oxygen Builder website. if you're looking for a tutorial on how to add a parallax background effect, check this article out.

Contents hide

1 How Will We Add Parallax To Oxygen Builder Elements?

2 How to add the Rellax.JS to Oxygen?

3 Conclusion