Interacitve Multi-layer Displacement Effect – displaceable.js

The displaceable.js JavaScript library applies a smooth, interactive, mouse-triggered displacement (parallax) effect on multiple layers you specify.

See also:

• Smooth Multi-layer Parallax Scroll Effect In Vanilla JavaScript

How to use it:

Install the displaceable.js with NPM.

# NPM
$ npm install displaceable --save

Import the displaceable.js into your project.

import Displaceable from 'displaceable';

Attach the Displaceable to single or multiple elements.

const displaceable = new Displaceable(document.getElementById('layer'));
const displaceable = new Displaceable([
  document.getElementById('layer-1'),
  document.getElementById('layer-2'),
  document.getElementById('layer-3')
]);

Possible options to customize the displacement effect.

const displaceable = new DisplacDisplacementeable(document.getElementById('layer'),{
      // how much the nodes translate on mouse move
      displaceFactor: 3, 
      // lock movement on the X axis
      lockX: true,       
      // lock movement on the Y axis
      lockY: false,      
      // how much it takes the nodes to reset when the mouse leaves the trigger area
      resetTime: 1000,   
      // how much the nodes skew on mouse move
      skewFactor: 5,     
      // the element that responds to the on mouse move event (window or Node)
      trigger: window    
      
});

You can also pass the options via HTML data attributes:

<img src="1.jpg"
     data-displace-factor="3"
     data-lock-x="true"
     data-lock-y="false"
     data-skew-factor="5"
     id="layer"
/>

Preview:

Changelog:

10/14/2019

• v0.5.0