Get a beautiful Material Design ripple effect in pure JavaScript for your website in less than 1 minute. The script is not blocking rendering on the first paint, because the effect only gets fired on onpointerdown
and onpointerup
events on the document
.
Import the ripple.js file in your project:
<script src="ripple.js"></script>
Add ripple class to your element:
<button class="ripple">Button with ripple effect</button>
Done!
Works only in browsers with pointer events support.
https://htmlpreview.github.io/?https://github.com/mariusclaret/ripple-effect/blob/master/demo.html
Marius Claret (@mariusclaret || https://twitter.com/mariusclaret)