Interacitve Multi-layer Displacement Effect – displaceable.js

Category: Animation , Javascript , Recommended | October 14, 2019
Author: dinohamzic
Views Total: 656
Official Page: Go to website
Last Update: October 14, 2019
License: MIT

Preview:

Interacitve Multi-layer Displacement Effect – displaceable.js

Description:

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

See also:

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:

Interacitve Multi-layer Displacement Effect - displaceable.js

Changelog:

10/14/2019

  • v0.5.0

You Might Be Interested In:


Leave a Reply