DEV Community

Cover image for How to make a parallax effect with Rellax.JS
Brett Anda 🔥🧠 for Developer Bacon 🥓🥓

Posted on • Originally published at developerbacon.ca on

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

Enter fullscreen mode Exit fullscreen mode

Importing

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

import Rellax from "rellax";

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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
});

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)