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

File Size: 4.93 KB
Views Total: 2375
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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.


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

  speed: 100

6. Customize the color of the 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.