50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

How to create parallax effects using Rellax.js in Bricks

Schermata 2022-07-26 alle 09.36.31

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

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 🙂

  • Lukáš Jakab

    Hello Maxime,

    first, your tuts are absolutely precious, thank you so much for the quality and speed in which you publish new cool stuff.

    I have troubles implementing it on 1.5 RC. Are there any requirements for the parallax to be working like wrapper type (div/block) or its properties (position, background attachment: scroll/fixed etc.)? Or maybe I set ACF incorrectly not sure.

    • Maxime Beguin

      Hey Lukáš,

      Thanks for the kind words!

      Div/block or positioning shouldn’t be affected by the script as it applies a transition:translate() to the element. Could you give me some more details to try to debug your issue? Do you see any errors in the console logs? Can you see the scripts (including the init.js file) loaded correctly on the page? Please double-check your source page code and check if you see the scripts at the end of the body tag. If these check all the boxes, make sure the trigger class is set properly? Let me know!

Leave your comment