Need help with displaceable?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dinohamzic
215 Stars 11 Forks MIT License 37 Commits 3 Opened issues

Description

A tiny, performant and configurable JavaScript library that smoothly displaces elements on mouse move.

Services available

!
?

Need anything else?

Contributors list

No Data

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.


I'm displaceable and I can only move horizontally!

Methods

destroy
: destroys all the associated events of a particular instance

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

displaceable.destroy();

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.