Lightweight Vanilla Javascript Parallax Library – rellax

Category: Animation , Javascript | January 27, 2020
Views Total:7,108 views
Official Page:Go to website
Last Update:January 27, 2020


Lightweight Vanilla Javascript Parallax Library – rellax


rellax is a small vanilla JavaScript library which provides a smooth parallax scrolling effect on any DOM element.

See also:

Basic usage:

Include the rellax JavaScript library on the webpage.

<script src="rellax.min.js"></script>

Initialize the rellax library.

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

Add the CSS class ‘rellax’ to any element where you want to apply the parallax scrolling effect to.

<div class="rellax">
  I’m slow and smooth

Customize the scrolling speed using data-rellax-speed attribute (-10 to +10).

<div class="rellax" data-rellax-speed="6">
  I’m slow and smooth

Center parallax elements using data-rellax-percentage attribute:

<div class="rellax" data-rellax-speed="6" data-rellax-percentage="0.5">
  I’m slow and smooth

Set the z-index property of parallax elements.

<div class="rellax" data-rellax-speed="6" data-rellax-percentage="0.5" data-rellax-zindex="999">
  I’m slow and smooth

You can also apply the parallax scrolling effect via JavaScript.

var instance = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    relativeToWrapper: false,
    round: true,
    vertical: true,
    horizontal: false,
    callback: function() {positions},

Destroy the parallax scrolling effect.


Refresh the parallax scrolling effect.



v1.12.0 (01/27/2020)

  • responsive speeds fix

v1.9.1 (03/29/2019)

  • replaced throw new errors with console.warns

v1.8.0 (02/18/2019)

  • Added “data-rellax-min” and “data-rellax-max”, Added “range.html”.

v1.7.2 (01/06/2019)

  • fix umd global handling

v1.7.0 (10/21/2018)

  • cancelAnimation when calling destroy method

v1.6.1 (05/31/2018)

  • Bug Fixes and Performance Improvements

You Might Be Interested In:

Leave a Reply