Author: | devision1088 |
---|---|
Views Total: | 437 views |
Official Page: | Go to website |
Last Update: | December 5, 2019 |
License: | MIT |
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