MAB WP

Already saw this?

Go back

How to use rellax.js with Divi

by | July 2019

Today we are going to achieve a nice
scroll animation using rellax.js!

You can also check a few demos here. On the actual Elegant Themes website
and my latest test https://mabwp.com/rellax

#1 – Lets call our files

First we need to go to DIVI -> THEME OPTIONS -> INTEGRATION -> ADD TO HEAD
We are going to call rellax.js and also a file I named data.js to handle with the speed and orientation of our animation.

Add the code below to call ‘rellax.js’.
(You can also visit this if you want a different version https://cdnjs.com/libraries/rellax )

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.js"</script>

You can download the file, data.js here

Alternatively you can copy/paste the code bellow to the ‘Add code to the < head > of your blog’ section

<script>
jQuery(document).ready(function($){
$('.data1').attr('data-rellax-speed', '1'),
$('.data2').attr('data-rellax-speed', '2'),
$('.data3').attr('data-rellax-speed', '3'),
$('.data4').attr('data-rellax-speed', '4'),
$('.data5').attr('data-rellax-speed', '5'),
$('.data6').attr('data-rellax-speed', '6'),
$('.data7').attr('data-rellax-speed', '7'),
$('.data8').attr('data-rellax-speed', '8'),
$('.data9').attr('data-rellax-speed', '9'),
$('.data10').attr('data-rellax-speed', '10'),
$('.data-1').attr('data-rellax-speed', '-1'),
$('.data-2').attr('data-rellax-speed', '-2'),
$('.data-3').attr('data-rellax-speed', '-3'),
$('.data-4').attr('data-rellax-speed', '-4'),
$('.data-5').attr('data-rellax-speed', '-5'),
$('.data-6').attr('data-rellax-speed', '-6'),
$('.data-7').attr('data-rellax-speed', '-7'),
$('.data-8').attr('data-rellax-speed', '-8'),
$('.data-9').attr('data-rellax-speed', '-9'),
$('.data-10').attr('data-rellax-speed', '-10');
});
</script>

#2 – Add our default behavior

Copy/past the code bellow to DIVI -> THEME OPTIONS -> INTEGRATION -> ADD TO BODY

Those are the settings that I feel it work for me. You are, off course, free o change. Visit the creator github for more options https://github.com/dixonandmoe/rellax

<script>
	window.onload = function(){
    var rellax = new Rellax('.rellax', {
		speed: -2,
    center: true,
    round: true,
    vertical: true,
    horizontal: false});
}
</script>

You should have something like this

rellax-js divi

#3 – Have fun

Just to any section, row, column or module and add the class ‘rellax‘ and/or datax (replace x for a number from -10 to 10)

how-to-use-rellax-js-parallax-with-divi

And that is it! I hope you enjoyed and if you added this to any of your sites feel free to share in the comments bellow. I would love to take a look and see how you implemented it

1 Comment

  1. Melle

    Thank you for the tutorial 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *