luxy.js

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.