liquify-js

Liquify js

* * * ## Demo Try Liquifys filter by visiting the [GitHub Pages](https://seeren.github.io/liquify-js/dist/). * * * ## Install Install with npm. ```bash npm install liquify-js ``` Include JavaScript file as bundle. ```html ``` * * * ## 💧 Usage Add `data-liquify` custom attribute to an HTMLElement. Without value the attribute apply the filter "infinite" with default settings. ```html

Liquified

``` - The default filter `infinite` provide a wrap effect without interaction. ```html

Default filter

```

- The filter `click` trigger the effect when a click is emit ```html

Click filter

```

- The filter `move` trigger the effect when a mouse move is emit ```html

Move filter

```

The document can be upgraded programmatically. ```js window.Liquify.upgrade() ``` The `upgrade` method provide a Promise. ```js window.Liquify .upgrade() .then((() => console.log('DOM Liquified'))) ``` * * * ## ⚙️ Options Options `frequency`, `degree` and `amplitude` can be configured using attributes. ```html

Common option

``` - Frequency default range is 0 to 1. - Amplitude default range is 0 to 1. - Degree range is 0 to 360. Options `duration` and `distance` can be configured using attributes. ```html

Gesture options

``` - Duration is in seconds. - Distance range is 0 to 100. Options can be configured dynamically using the Liquify property of the HTMLElement. ```js const element = window.document.querySelector("[data-liquify]"); element.Liquify.frequency = 0.5; element.Liquify.degree = 55; element.Liquify.amplitude = 0.5; ``` * * * ## 🎓 License This project is licensed under the [MIT](/liquify-js/LICENSE) License.

This site is open source. Improve this page.