How to create parallax effects using Rellax.js in Bricks

This tutorial provides the JS & PHP codes that can be pasted in order to create smooth parallax effects using the Rellax.js library when using Bricks Builder.

Table of Contents

• Requirements
• Add the rellax.js library to your child theme
• Create an init.js file
• Enqueue the scripts on your page
• Add the parallax effect to any element in Bricks
• Conclusion

Requirements

• Bricks Theme (any version)
• Bricks Child Theme

Add the rellax.js library to your child theme

The first thing to do is to download the last rellax.min.js file on the library’s author page and upload it inside your child theme folder.

Create an init.js file

The next step is to create an init file (we called ours rellax_init.js) that will trigger the library and paste the following code:

window.addEventListener('load', () =>{
    const relax = document.querySelectorAll('.rellax');

    if(relax.length > 0){
        var rellax = new Rellax('.rellax', {
            center: true,
        });
    }
})

Enqueue the scripts on your page

Let’s now enqueue our files inside our functions.php of our child theme. I personally prefer to conditionally enqueue my scripts using a true/false acf field as described in this tutorial. So my code will be:

add_action( 'wp_enqueue_scripts', function() {
   // Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
   if ( ! bricks_is_builder_main() && class_exists( 'ACF' ) ) {

        // Enqueue all your other scripts here....

        // RellaxJS scripts
        if ( get_field('activate_rellaxjs' ) ) {
		wp_enqueue_script( 'rellax', get_stylesheet_directory_uri() . '/js/rellax/rellax.min.js', array(), '1.12.1' );
    		wp_enqueue_script( 'rellax_init', get_stylesheet_directory_uri() . '/js/rellax_init.js', array( 'rellax' ), filemtime( get_stylesheet_directory() . '/js/rellax_init.js' ) );
	}
   }
});

On the edit page, make sure to toggle on the ACF custom field to correctly enqueue your scripts.

Add the parallax effect to any element in Bricks

To activate our parallax effect on any element, we just need to do 2 things:

• Add the rellax class to our element

• add a data-attribute data-rellax-speed to indicate the speed of the transition (from -10 to 10).

Conclusion

If everything worked, you should now see your parallax effect when scrolled on the frontend. As an example, we added the effect on both the image and the :before background element here:

Remember, slight parallax effects can be cool but don’t abuse it or your website will be a mess 🙂