This tutorial provides the steps to implement Jarallax in Oxygen for simulating parallax animated backgrounds.

Live Demo

Note: I have disabled the parallax effect on tablets and mobiles since the image appears to be jumping a bit when scrolling.

Do let me know in the comments if you are aware of any other script/method that works in all the browsers (desktop and mobile) smoothly.

If you do not care about IE but want a working parallax effect for everywhere else incl. tablets and mobiles give this CSS method (via David Browne) a try.

Step 1

Install and activate my custom functionality plugin.

Upload ofi.min.js (polyfill to make object-fit styles work in IE11 and below) and jarallax.min.js to the plugin’s assets/js directory.

Inside the custom_enqueue_files() function, add

wp_enqueue_script(
    'object-fit-images',
    plugin_dir_url( __FILE__ ) . 'assets/js/ofi.min.js',
    array(),
    '3.2.3',
    true
);

wp_enqueue_script(
    'jarallax',
    plugin_dir_url( __FILE__ ) . 'assets/js/jarallax.min.js',
    array(),
    '1.10.3',
    true
);

Step 2

a) Add a Section in Oxygen builder and give it a class of jarallax.

If you wish to show some text overlaid on top of the image, set a background color so the text is readable. Ex.: the semi-transparent black in the demo.

We are going to use an embedded image vs a background (due to this bug) and position it absolutely. This will render the section with 0 height. Therefore, we need to either specify a fixed height or a top and bottom padding. The latter approach is recommended. In my demo page, I’ve set 200px top and bottom padding for Parallax images 1 and 3. Since I wanted the second parallax image to be taller, I’ve set its (by selecting the ID) top and bottom padding to 300px each. This can be set at Advanced > Size & Spacing.

At Advanced > Layout, set the Position to relative.

At Advanced > Custom CSS, add

z-index: 0;

b) Add an Image element inside the Section.

Add jarallax-img class to it.

Browse to and set your desired image.

Set width and height to 100% each.

Advanced > Layout: Set Position to absolute with Top and Left values of 0 each.

If you want the Section’s background color to peek through the image, go to Advanced > Effects > Opacity and set the value to say, 0.4.

In Custom CSS, add

object-fit: cover; /* support for plugin https://github.com/bfred-it/object-fit-images */ font-family: 'object-fit: cover;'; z-index: -1;

c) Add a Code Block element.

In the PHP & HTML area, Comment out the echo line like so:

<?php
    // echo "hello world!";
?>

In Javascript area, add:

objectFitImages();

jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2,
    disableParallax: /iPad|iPhone|iPod|Android/
});

Click the Save button and you should now be able to view the image with parallax effect in the frontend.

Step 3

If you want to overlay some content on top of the parallax image, follow along.

a) Add a Div inside the Section.

Give it a class of say, parallax-content.

Stack child elements vertically with horizontal item alignment. Set a width of 100%.

Size & Spacing: Set 50px left and right padding and max-width of say, 800px.

Layout: Set absolute position with Top and Left of 50% each.

Typography: Set Color to #fff and Text Align to center.

Custom CSS:

-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

b) Add your content inside the Div.

In my demo page, I’ve added Heading and Text elements.

Here’s the final full Structure of the demo page:

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: