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

Category: Animation , Javascript , Recommended | May 31, 2018
Author: min30327
Views Total: 82
Official Page: Go to website
Last Update: May 31, 2018
License: MIT

Preview:

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

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

};

Leave a Reply