How to make a parallax effect with Rellax.JS

Rellax is a lightweight library made exactly for parallax effects. This JavaScript library makes it very easy to make a parallax effect so that you don't have to go through the trouble of making it your self.

Installation

This is by far the most important step. If this is not added then anything will work because it was not installed :)

npm install rellax
#of
yarn add rellax

Importing

Just like other JavaScript libraries, you will need to import the script into your

import Rellax from "rellax";

After you have imported the library you will want to set a variable for it to set the settings later on. The only variable you need to set when making this is the class that Rellax.js will look for to apply the parallax.

var rellax = new Rellax(".rellax");

JavaScript config

To change the settings for Rellax.js you will need to replace the variable definition with the below code. This sets the defaults for every parallax element.

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

Adding the effect

Now let's say that you have an image that you would like to apply the parallax to and the HTML looks something like this:

<img src="cool-parallax-image.jpeg" alt="" />

To let Rellax.js know that you want to add the parallax to this element we will add the class from before to this element, like so:

<img src="cool-parallax-image.jpeg" class="rellax" alt="" />

Parallax speed

Just adding the class will set the default parallax speed for the element. If you want to increase or decrease the speed of the parallax then you can add this data-rellax-speed attribute to that element as well as the class. The minimum value is -10 and the maximum value is 10.

<img src="cool-parallax-image.jpeg" class="rellax" data-rellax-speed="-7" alt="" />

If you would like to learn more about what Rellax.js can do check out there Github documentation.