Lightweight Vanilla Javascript Parallax Library – rellax

Preview:

Description:

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

See also:

• Top 10 JavaScript Libraries For Parallax Scroll Effects

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
</div>

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

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

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
</div>

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
</div>

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.

instance.destroy();

Refresh the parallax scrolling effect.

instance.refresh();

Changelog:

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