Newly Practicing Mortician

    liquify-js

    2.0.1 • Public • Published

    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.

    Install

    npm i liquify-js

    DownloadsWeekly Downloads

    8

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    18.4 MB

    Total Files

    46

    Last publish

    Collaborators

    • seeren