Merge branch 'master' of github.com:dinohamzic/displaceable

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
+<img
+     data-displace-factor="10"
+     data-skew-factor="10"
+     id="example-id"
+/>
+```