loading...
Cover image for How to make a parallax effect with Rellax.JS
Developer Bacon πŸ₯“πŸ₯“

How to make a parallax effect with Rellax.JS

brettanda profile image Brett Anda πŸ”₯🧠 Originally published at developerbacon.ca on ・2 min read

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.

Posted on by:

brettanda profile

Brett Anda πŸ”₯🧠

@brettanda

I make tutorials for beginner developers at developerbacon.ca πŸ₯“

Developer Bacon πŸ₯“πŸ₯“

A website made with Gridsome aimed to help beginner web developers

Discussion

markdown guide