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

#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 )

<script src=""</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

$('.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');

#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

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

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)


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 🙂


Submit a Comment

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