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

Category: Animation , Javascript | December 5, 2019
Author:devision1088
Views Total:365 views
Official Page:Go to website
Last Update:December 5, 2019
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply