diff --git a/README.md b/README.md index f3f9ab1..b8b06ed 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,14 @@ A tiny JavaScript library that handles super smooth element displacement on mouse move. +![Displaceable screen capture](screen-capture.gif) + --- +## Demo and code examples + +Coming soon... + ## Setup #### Install: @@ -47,4 +53,27 @@ const displaceable = new Displaceable([ ## Configuration -Coming soon... +#### `settings` object + +You can pass an object as the second parameter of `Displaceable()` to modify the settings of the current instance. + +```js +const displaceable = new Displaceable(document.getElementById('id'), { + displaceFactor: 3, // how much the nodes translate on mouse move (float) + resetTime: 1000, // how much it takes the nodes to reset when the mouse leaves the trigger area (ms) + skewFactor: 5, // how much the nodes skew on mouse move (float) + trigger: window // the element that responds to the on mouse move event (window or Node) +}); +``` + +#### Data attributes: `data-displace-factor` and `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 configuration object only for that particular element. + +```html + +```