displaceable

A tiny JavaScript library that handles super smooth element displacement on mouse move. Inspired by this shot.

Demo and code examples

Live demo and React implementation example.

Setup

Install:

npm install displaceable

Basic usage

Import:

import Displaceable from 'displaceable';

Initialize:

// single Node
const displaceable = new Displaceable(document.getElementById('id'));

or

// NodeList
const displaceable = new Displaceable(document.querySelectorAll('img'));

or

// array of Nodes
const displaceable = new Displaceable([
  document.getElementById('id-1'),
  document.getElementById('id-2'),
  document.getElementById('id-3')
]);

Configuration

settings object

You can pass an object as the second parameter of Displaceable() to modify the instance settings.

const displaceable = new Displaceable(document.getElementById('node-id'), {
  displaceFactor: 5,
  lockY: true,
  resetTime: 500,
  skewFactor: 10,
  trigger: document.getElementById('trigger-id')
});

Data attributes:

• data-displace-factor
• data-lock-x
• data-lock-y
• data-skew-factor

To control each Node independently, use the following data attributes. The value set in the data attribute will override the one in the settings object only for that particular element.

<img
  data-displace-factor="10"
  data-skew-factor="10"
  id="img-id"
/>

<div
  data-lock-y="true"
  id="div-id"
>
  I'm displaceable and I can only move horizontally!
</div>

Methods

destroy: destroys all the associated events of a particular instance

const displaceable = new Displaceable(document.getElementById('id'));

displaceable.destroy();