Rellax is a very smooth, easily configurable, and super lightweight javascript plugin for parallax scroll. Rellax is very easy to use and it has many options to modify. With help of the rellax, you can easily set up various types of parallax scrolling throughout the website according to your needs.

Features:

• Smooth, lightweight, and easily configurable.
• Supports horizontal and vertical scroll.
• Option to modify the speed and responsive speed.
• Option to center parallax elements in your viewport.
• Sorting of the elements properly.

How to use it:

1. Include the Javascript rellax.min.js at the bottom of the web page.

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

2. Add the basic HTML to the page.

<div class="rellax">
  I’m that default chill speed of "-2"
</div>
<div class="rellax" data-rellax-speed="7">
  I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-4">
  I’m extra slow and smooth
</div>

<script src="rellax.min.js"></script>
<script>
  // Accepts any class name
  var rellax = new Rellax('.rellax');
</script>

4. Initialize the plugin and we're ready to go.

<script>
  // Also can pass in optional settings block
  var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
</script>

Speed / Responsive Speed

<div class="rellax" data-rellax-speed="7" data-rellax-xs-speed="-5" data-rellax-mobile-speed="3" data-rellax-tablet-speed="-8" data-rellax-desktop-speed="1">
  I parallax at all different speeds depending on your screen width.
</div>

You can setup an array of breakpoints

<script>
  // This is the default setting
  var rellax = new Rellax('.rellax', {
    breakpoints: [576, 768, 1201]
  });
</script>

Centering

Element-wise Centering

<div class="rellax" data-rellax-percentage="0.5">
  I’m that default chill speed of "-2" and "centered"
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5">
  I’m super fast!! And super centered!!
</div>
<div class="rellax" data-rellax-speed="-4" data-rellax-percentage="0.5">
  I’m extra slow and smooth, and hella centered.
</div>

Global Centering

<script>
  // Center all the things!
  var rellax = new Rellax('.rellax', {
    center: true
  });
</script>

Z-index

<div class="rellax">
  I’m that default chill speed of "-2" and default z-index of 0
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-zindex="5">
  I’m super fast!! And on top of the previous element, I'm z-index 5!!
</div>

Horizontal Parallax

<script>
  // Adding horizantal parallax scrolling
  var rellax = new Rellax('.rellax', {
    // Activate horizantal scrolling
    // Turned off by default
    horizontal: true
    //Deactivate vertical scrolling
    vertical: false
  });
</script>

Callback

<script>
  // Start Rellax
  var rellax = new Rellax('.rellax-blur-card', {
    callback: function(positions) {
      // callback every position change
      console.log(positions);
    }
  });
</script>

<div class="lg-green vertical"></div>
<div class="lg-purple vertical" data-rellax-speed="7" data-rellax-percentage="0.5"></div>
<div class="lg-purple2 vertical" data-rellax-speed="-10" data-rellax-percentage="0.5"></div>

var rellax = new Rellax('.vertical', {
   center: true,
});

<div class="lg-green horizontal" data-rellax-speed="0" data-rellax-vertical-scroll-axis="x"></div>
<div class="lg-purple horizontal" data-rellax-speed="1" data-rellax-vertical-scroll-axis="x"></div>
<div class="lg-purple2 horizontal" data-rellax-speed="-1" data-rellax-vertical-scroll-axis="x"></div>

var rellax = new Rellax('.horizontal', {
  horizontal: true,
});