Apply Click/Tap Ripple Effects To Any DOM Elements - ripple-effect

File Size: 8.87 KB
Views Total: 1701
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Apply Click/Tap Ripple Effects To Any DOM Elements - ripple-effect

A minimal and dead simple to use jQuery plugin which implements the Android-style click/tap ripple effect on any DOM elements as defined by Material Design Guidelines.

How it works:

  • Detect element click action.
  • Get the click position.
  • Define ripple position and add the .on-animate class.
  • Create the ripple effect using CSS3 transforms

See also:

How to use it:

1. Load the stylesheet ripple-effect.css and JavaScript ripple-effect.js from the dist folder.

<link rel="stylesheet" href="dist/css/ripple-effect.css">
<script src="" 
<script src="dist/js/ripple-effect.min.js"></script>

2. Apply the function rippleEffect on any clickable element and done.

<button type="button">Button</button>
<a href="javascript:void(0)">Link</a>
<div class="demo">DIV element</div>
  $('button, a, .demo').rippleEffect();

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