Author: | mariusclaret |
---|---|
Views Total: | 1,574 views |
Official Page: | Go to website |
Last Update: | October 18, 2017 |
License: | MIT |
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>