Smooth Inertial & Parallax Scroll Effects In JavaScript – luxy.js

Preview:

Description:

luxy.js is a lightweight JavaScript plugin which applies smooth inertial scroll and parallax scroll effects to your webpage.

How to use it:

Install & download the luxy.js with NPM:

# NPM
$ npm install luxy.js --save

Insert the JavaScript file ‘luxy.js’ into the page.

<script src="dist/js/luxy.js"></script>

Add the class ‘luxy-el’ to parallax elements within the document and config the parallax scroll effect with the following ‘data’ attributes:

• data-offset: offset in pixels
• data-speed-y: the speed of the vertical parallax scroll effect
• data-horizontal: sets to ‘1’ to enable the horizontal parallax scroll
• data-speed-x: the speed of the horizontal parallax scroll effect

<div class="luxy-el" 
     data-offset="-50"
     data-speed-y="-5">
  <img src="parallax.png" alt="image">
</div>

Then wrap all the web content into a container with the ID of ‘luxy’.

<div id="luxy">
  your main content and parallax elements here
</div>

Initialize the luxy.js to enable the Inertial & Parallax Scroll Effects.

luxy.init();

Available plugin options.

{
  // selector of main container
  wrapper: '#luxy',
  // selector of parallax elements
  targets : '.luxy-el',
  // speed
  wrapperSpeed: 0.08,
  targetSpeed: 0.02,
  // in percentage
  targetPercentage: 0.1
};