Parallax in Oxygen

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: