Google Material Design Ripple Effects with Wave.js

Category: Animation , Javascript , Recommended | June 15, 2018
Author: publicis-indonesia
Views Total: 1,284 views
Official Page: Go to website
Last Update: June 15, 2018
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:

Load the wave.css and wave.js in your web page.

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

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

<span class="waves-effect waves-button">
  <a href="#">Click Here</a>
</span>

Active the ripple effect.

var w = new Waves();
w.displayEffect();

Changelog:

v0.7.6 (06/15/2018)

  • Updated

You Might Be Interested In:


3 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