https://github.com/dinohamzic/displaceable
A tiny, performant and configurable JavaScript library that smoothly displaces elements on mouse move.
https://github.com/dinohamzic/displaceable
animation css-transforms css-transitions es6 javascript no-dependencies
Last synced: about 1 month ago
JSON representation
A tiny, performant and configurable JavaScript library that smoothly displaces elements on mouse move.
- Host: GitHub
- URL: https://github.com/dinohamzic/displaceable
- Owner: dinohamzic
- License: mit
- Created: 2018-11-29T17:51:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:27:24.000Z (over 2 years ago)
- Last Synced: 2025-04-09T20:01:34.621Z (about 1 month ago)
- Topics: animation, css-transforms, css-transitions, es6, javascript, no-dependencies
- Language: JavaScript
- Homepage:
- Size: 9.88 MB
- Stars: 222
- Watchers: 4
- Forks: 12
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# displaceable
A tiny JavaScript library that handles super smooth element displacement on mouse move. Inspired by this [shot](https://dribbble.com/shots/5594494-Molley-Heltz-Inspiration-Page-Animation).
---
## Demo and code examples
Live [demo](https://subtlebits.com/projects/displaceable) and React implementation [example](https://github.com/dinohamzic/www-subtlebits-com/blob/master/pages/projects/displaceable.js).
## Setup
#### Install:
```bash
npm install displaceable
```
## Basic usage
#### Import:
```js
import Displaceable from 'displaceable';
```
#### Initialize:
```js
// single Node
const displaceable = new Displaceable(document.getElementById('id'));
```
or
```js
// NodeList
const displaceable = new Displaceable(document.querySelectorAll('img'));
```
or
```js
// 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.
```js
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.
```html
![]()
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();
```