A tiny, performant and configurable JavaScript library that smoothly displaces elements on mouse move.
Switch branches/tags
Nothing to show
Clone or download
Latest commit cb4a2f6 Dec 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib 0.4.0 Dec 2, 2018
src Add support for locking X or Y axis Dec 2, 2018
.babelrc Add flag for comments removal Nov 30, 2018
.eslintignore Initial commit Nov 29, 2018
.eslintrc.json Initial commit Nov 29, 2018
.gitignore Initial commit Nov 29, 2018
LICENSE Initial commit Nov 29, 2018
README.md `node` to uppercase Dec 4, 2018
package-lock.json 0.4.0 Dec 2, 2018
package.json 0.4.0 Dec 2, 2018
screen-capture.gif Add screen capture gif Nov 29, 2018

README.md

displaceable

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

Displaceable screen capture


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')
});
Property Type Default Description
displaceFactor number 3 Multiplier for the translate transformation. The bigger the number, the more the Nodes will move. You can use a negative value to invert the direction of the movement.
lockX boolean false If set to true, Nodes will only move on the Y axis.
lockY boolean false If set to true, Nodes will only move on the X axis.
resetTime number 1000 How fast the Nodes will return to their original position (in milliseconds).
skewFactor number 5 Multiplier for the skew transformation. The bigger the number, the more Nodes will skew. You can use a negative value to invert the skewing direction.
trigger window|Node window The Node that triggers the displacement. It can be any Node with height and width greater than zero.

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>