elementor4fun-logo
Last update: September 9, 2018

Parallax effect on any element

JUST A PARALLAX EFFECT

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Step 1

Download the package : https://github.com/dixonandmoe/rellax
Then upload and enqueue the file rellax.min.js

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

[ see HOWTO to learn how to add custom files ]

JUST A PARALLAX EFFECT

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Step 2

Add this Javascript code in a Code Block element :

var rellax = new Rellax('.rellax', {
    speed: -3,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });

Step 3

Add the 'rellax' class to any element.

For example, for the parallax effect at the top of this page, I have created 2 columns. One with the image and one with a Div where I put my content.
I have added the 'rellax' class to this Div and I have changed the left margin to -200px so it will be over the image (for a better effect).

If you want to have different parallax effects with different speeds, you just have to change the options in the Javascript code, and add new classes.

As usual, you can find all the details in the official page : https://github.com/dixonandmoe/rellax

closealign-justifychevron-downcaret-up