luxy.js

Inertia scroll and parallax effect plugin in Vanilla.js

Demo

View the demo

Installation

You can install it using npm:

npm install luxy.js --save

Or just include the script in your page:

<script src="path/to/luxy.js" charset="utf-8"></script>

Included luxy.js in your project and initialize:

<script charset="utf-8">
    luxy.init();
</script>

Usage

Wrap the entire content with the element specified in the wrapper option. Please exclude fixed elements.

<div id="luxy">
    ... Entire content
</div>

Add .luxy-el to the element for which parallax effect is to be specified.

<div id="luxy">
    <div class="luxy-el"></div>
</div>

Specify the speed of the parallax effect with the data-speed-y attribute and offset with the data-offset attribute.

<div id="luxy">
    <div class="luxy-el" data-speed-y="5" data-offset="-50"></div>
</div>

If you want to move horizontally, specify data-horizontal="1" and specify the speed in the horizontal direction with the data-speed-x attribute.

<div id="luxy">
    <div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div>

Options

| Name | default | description | |--------------|------------|-----------------------------------| | wrapper | '#luxy' | Entire content wrapper element. | | targets | '.luxy-el' | Parallax effect targets elements. | | wrapperSpeed | 0.08 | Inertia scroll speed. |