How to use the parallax.js library in Oxygen

I have already made a tutorial to explain how to build the same effect. But it was based on the TweenMax library.

This method uses the library parallax.js from Matthew Wagerfield.
It's smaller, it has much more features and it can work on mobile.

Step 1

Go to this page to download the compiled.zip file: https://github.com/wagerfield/parallax/releases
Upload and enqueue the JS file :

wp_enqueue_script( 'parallax-js', plugin_dir_url( __FILE__ ) . 'assets/js/parallax.min.js', '', '', true );

[ see HOWTO to learn how to add custom files ]

Let's start to build the structure, so it can look like this:

Step 2

First, we need a container, that we call 'scene':

Add a Div, change his ID to 'scene', set the width to 100% and the alignments like the picture below:

In Advanced, select relative as the position:

note that if you want to make it work on mobile, you should also add Overflow:hidden

Step 3

Now we need to add the layers. In our example, we have 3 layers and each of them contain an image.

For each of these Divs, set the width and height as the same size as the images they contain.
And set the margin to auto. So the layers (Divs) will be centered vertically and horizontally.

Change the position of these Divs to absolute. With a top, bottom, left and right = 0;
You can also change the z-index if you want to change the order.

Step 4

Now that you have added your 3 Divs, with their 3 images, you have to change the position of the images, or they will all be centered.
You can keep the first one centered, and change the margins of the other 2:

Step 5

In a Code Block, add this Javascript code: (don't forget to change the 3 Div's ID in the first 3 lines).

document.getElementById('div_block-4-800').setAttribute('data-depth', '1');
document.getElementById('div_block-6-800').setAttribute('data-depth', '0.5');
document.getElementById('div_block-8-800').setAttribute('data-depth', '0.3');

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
    relativeInput: true,
    hoverOnly: true,
});

Each layer needs a data-depth attribute.
There are several ways to add data attributes. The basic Javascript way:

document.getElementById('div_block-4-800').setAttribute('data-depth', '0.5');

But I highly recommend this plugin, as it will be faster and easier to deal with data attributes: Oxygen Attributes

Note about mobile mode

If it works on mobile, it doesn't always look great (depends on your design). You can deactivate the parallax effect with this code:

if (window.matchMedia("(min-width: 480px)").matches) {

    document.getElementById('div_block-4-800').setAttribute('data-depth', '1');
    document.getElementById('div_block-6-800').setAttribute('data-depth', '0.5');
    document.getElementById('div_block-8-800').setAttribute('data-depth', '0.3');

    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene, {
        relativeInput: true,
        hoverOnly: true,
    });

}

Like usual, if you want to know more about the other options, check the official page: https://github.com/wagerfield/parallax