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

Category: Animation , Javascript , Recommended | May 31, 2018
Views Total:7,286 views
Official Page:Go to website
Last Update:May 31, 2018


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


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 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" 
  <img src="parallax.png" alt="image">

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

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

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


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

You Might Be Interested In:

Leave a Reply