liquify-js

Liquify filter for HTML elements

Usage no npm install needed!

<script type="module">
  import liquifyJs from 'https://cdn.skypack.dev/liquify-js';
</script>

README

Liquify js


Demo

Try Liquifys filter by visiting the GitHub Pages.


Install

Install with npm.

npm install liquify-js

Include JavaScript file as bundle.

<script src="./node_modules/liquify-js/dist/liquify.js"></script>

💧 Usage

Add data-liquify custom attribute to an HTMLElement. Without value the attribute apply the filter "infinite" with default settings.

<div data-liquify>Liquified</div>
  • The default filter infinite provide a wrap effect without interaction.
<div data-liquify="infinite">Default filter</div>

  • The filter click trigger the effect when a click is emit
<div data-liquify="click">Click filter</div>

  • The filter move trigger the effect when a mouse move is emit
<div data-liquify="move">Move filter</div>

The document can be upgraded programmatically.

window.Liquify.upgrade()

The upgrade method provide a Promise.

window.Liquify
     .upgrade()
     .then((() => console.log('DOM Liquified')))

⚙️ Options

Options frequency, degree and amplitude can be configured using attributes.

<div data-liquify
     data-frequency="0.5"
     data-degree="55"
     data-amplitude="0.5">Common option</div>
  • 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.

<div data-liquify="click"
     data-duration="5"
     data-distance="75">Gesture options</div>
  • Duration is in seconds.
  • Distance range is 0 to 100.

Options can be configured dynamically using the Liquify property of the HTMLElement.

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 License.