Tiny Parallax Library For Any Kind Of HTML Content – unillax.js

Preview:

Description:

unillax.js is a tiny and easy-to-use JavaScript library that applies a subtle Parallax Scroll effect to any kind of HTML content such as backgrounds, images, text, etc.

How to use it:

1. Load the minified version of the unillax.js library into the HTML page.

<script src="unillax-min.js"></script>

2. Add the CSS class unillax-element to parallax element and config the parallax scroll effect with the following HTML data attributes:

• data-unillax-depth: scroll speed
• data-unillax-position: start position (top, bottom, or middle)

<h1 class="unillax-element" data-unillax-depth="-8" data-unillax-position="middle">
  I move faster than other elements.
</h1>

<h1 class="unillax-element" data-unillax-position="middle">
  I move slower than other elements.
</h1>

3. You can also group the parallax elements using the unillax-container class.

<div class="unillax-container" style="height: 400px;">
  <h1>Parallax Element 1</h1>
  <p>Parallax Element 2</p>
  <p>Parallax Element 3</p>
  ...
</div>

4. Apply the parallax scroll effect to an image (background parallax scroll effect).

<div class="unillax-container" style="height: 400px;">
  <img src="bg.jpg" class="unillax-background">
  <h1>Parallax Element 1</h1>
  <p>Parallax Element 2</p>
  <p>Parallax Element 3</p>
  ...
</div>

Changelog:

v1.0.3 (12/05/2019)

• Added support for multiple event listeners