jQuery Plugin For Ripple Animation On Click/Tap - simple-ripple

Just another jQuery implementation of Google Android Material Design's "Ripple" animation on click and/or tap events. Smooth ripple animation based on CSS3 transitions and transforms.

How to use it:

1. Include the required stylesheet simple-ripple.css on the web page.

<link href="simple-ripple.css" rel="stylesheet">

2. Create an action button like so:

<div class="ripple-effect">
  Action Button
  <span class="ripple-container">
    <span class="ripple is-animated"></span>
  </span>
</div>

3. Include jQuery and the JavaScript file simple-ripple.js at the bottom of the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="simple-ripple.js"></script>

4. Activate the ripple click effect on the action button.

$('.ripple-effect').ripple();

5. Define the animation speed of the ripple effect when triggered.

$('.ripple-effect').ripple({
  speed: 100
});

6. Customize the color of the ripple.

$('.ripple-effect').ripple({
  color: '#000'
});

---

This awesome jQuery plugin is developed by hiooyUI. For more Advanced Usages, please check the demo page or visit the official website.