Lightweight Vanilla Javascript Parallax Library – rellax

Category: Animation , Javascript | February 18, 2019
Author: dixonandmo
Views Total: 5,198
Official Page: Go to website
Last Update: February 18, 2019
License: MIT

Preview:

Lightweight Vanilla Javascript Parallax Library – rellax

Description:

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