isaeken/jquery-waves

A simple & lightweight waves effect plugin

Installation

You can install jquery-waves plugin using npm or include directly files

Install with using npm

npm install jquery-waves

or include files

<link rel="stylesheet" href="/your/servers/assets/path/css/jquery-waves.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="/your/servers/assets/path/js/jquery-waves.min.js"></script>

Documentation

Creating Waves Effect

You can create waves using classes for example:
<button class="waves-effect">Button</button>

or you can create wave effect with attributes for example:
<button data-waves>Button</button>

Wave effect with background color

<button data-waves data-waves-background-color="rgba(255, 0, 0, 0.35)">Button</button>

Colored Wave With Classes


                    <button class="waves-effect">Default</button>

                    <button class="waves-effect waves-light bg-black">Light</button>

                    <button class="waves-effect waves-red">Red</button>

                    <button class="waves-effect waves-yellow">Yellow</button>

                    <button class="waves-effect waves-orange">Orange</button>

                    <button class="waves-effect waves-purple">Purple</button>

                    <button class="waves-effect waves-green">Green</button>

                    <button class="waves-effect waves-teal">Teal</button>

Rainbow Wave

<button data-waves data-waves-background-color="RANDOM">Button</button>

Wave effect with opacity

<button data-waves data-waves-background-color="red" data-waves-opacity="0.35">Button</button>

Wave effect with duration

Default

<button data-waves data-waves-duration="800">Button</button>

Fast

<button data-waves data-waves-duration="300">Button</button>

Slow

<button data-waves data-waves-duration="1200">Button</button>

Wave effect on complete event

<button data-waves data-waves-duration="800">Button</button>

Wave effect on custom element

.box {
    position: relative;
    display: block;
    cursor: pointer;
    width: 250px;
    height: 250px;
    border: 1px solid black;
}

<div class="box waves-effect">This is a box</div>

This is a box

Create wave effect with programmatically

<div id="elementId" class="box">Click me</div>
<script>
    $('#elementId').click(function () {
        $(this).waveEffect(
            50, // x position
            80, // y position
            'red', // background color
            1, // opacity
            2000, // duration
            function () { } // onComplete event
        );
    });
</script>

Click me