Google Material Design Ripple Effects with Wave.js

Category: Animation , Javascript , Recommended | February 16, 2021
Author: publicis-indonesia
Views Total: 410 views
Official Page: Go to website
Last Update: February 16, 2021
License: MIT

Preview:

Google Material Design Ripple Effects with Wave.js

Description:

Wave.js is a standalone JS library for creating Google Material Design styled click effects on any Html elements. The HTML elements can be buttons, icons, images, DIVs or any other inline elements.

Basic Usage:

1. Load the wave.css and wave.js on your web page.

<link rel="stylesheet" href="waves.css">
<script src="waves.js"></script>

2. Create an HTML element on where you wish to apply a ripple effect when clicked.

<a href="#" class="example">Click Here</a>

3. Active the ripple effect on the element you just created.

Waves.attach('.example');

4. Initialize the library and done.

Waves.init();

5. Styling the trigger element with the following CSS classes.

<a href="#" class="waves-button">
  Semi-rounded Button
</a>
<a href="#" class="float">
  Float Effect On Click
</a>
<a href="#" class="waves-circle">
  Circle Style
</a>
<a href="#" class="waves-block">
  Make the element display: block
</a>

Changelog:

2021-02-16

  • Doc updated

v0.7.6 (06/15/2018)

  • Fix SVGElements that do not shortcircuit getWavesEffectElement
  • Fix memory leak
  • Change bower main files to their unminified versions
  • Add TypeScript typings
  • Explicitly define window.Waves for global use

You Might Be Interested In:


4 thoughts on “Google Material Design Ripple Effects with Wave.js

  1. Pouet12

    I have experiment, but it seems waves.min.js is not loaded.
    TypeError: Waves is not a constructor
    window.onload = function () {
    var w = new Waves();
    w.displayEffect();
    };

    Reply

Leave a Reply