Add Parallax Motion To Background Images – lux.js

Preview:

Description:

lux.js is a lightweight, performant, easy-to-use background parallax scrolling library that supports up, down, left, right directions.

How to use it:

1. Include the lux.js library on the page.

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

2. Apply the parallax scrolling effect to the whole page.

<div class="lux-body-bg" style="background-image: url('bg.jpg');">
  ...
</div>

3. Apply the parallax scrolling effect to a specific container.

<div class="lux" data-direction="bottom">
  <div class="lux-bg" style="background-img: url('bg.jpg');"></div>
  <div class="lux-fade">
    <div data-direction="left">
      Your Content Here
    </div>
  </div>
</div>