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.
Let's take a look at a couple of methods that you can use to add parallax to individual elements within Oxygen Builder.
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:
var rellax = new Rellax('.rellax');
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>
And here's a visual example:
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.
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.