Minimalist Ripple Effect On Click And Tap – ripple.js

Preview:

Description:

Yet another JavaScript library which implements the Material Ripple effect on any elements you specify.

How to use it:

Import the ripple.js script into the web page.

<script src="ripple.js"></script>

Just add the CSS class ‘ripple’ to the target elements and done.

<h2>Ripple on cards</h2>
<div id="card" class="ripple"></div>
<h2>Ripple on buttons</h2>
<button id="button" class="ripple">Button</button>
<h2>Ripple on fabs</h2>
<div id="fab" class="ripple">
  <svg viewBox="0 0 24 24">
      <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
  </svg>
</div>
<h2>Ripple on icons</h2>
<div id="icon" class="ripple">
  <svg viewBox="0 0 24 24">
      <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
  </svg>
</div>