Configurable Material Ripple Tap Effect - jQuery touch-ripple

The touch-ripple jQuery plugin creates a customizable Material Design ripple animation as you tap a clickable element on touch devices.

The plugin can not work with the 'Click' event. Run the example on the mobile devices or in the browser's dev tool.

1. Include jQuery library and the jQuery touch-ripple plugin's script on the page when needed.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="touch-ripple.js"></script>

2. Initialize the plugin on the whole document and we're ready to go.

$(function(){
  $('body').ripple();
});

3. Add the CSS class ripple to any clickable/tappable element within the document.

<div class="ripple">
  Tap Me!
</div>

4. Customize the ripple animation by overriding the default plugin settings as displayed below:

$('body').ripple({
  // opacity (0-1)
  opacity: 0.4,
  // background color
  background: 'currentColor',
  // selector
  selector: '.ripple',
  // exclude selector
  excludeSelector: '.no-ripple',
  // default classes
  rippleOnClass: 'ripple-on',
  rippleCircleClass: 'ripple-circle',
  // data attributes
  opacityDataName: 'ripple-opacity',
  backgroundDataName: 'ripple-background',
  expanseDelayDataName: 'ripple-expanse-delay',
  // delay in milliseconds
  expanseDelay: 0,
  // duration in milliseconds
  expanseDuration: 175,
  // easing
  expanseEasing: 'linear',
  // duration in milliseconds
  fadeDuration: 175,
  // easing
  fadeEasing: 'linear'
  
});

5. You can also customize the opacity, delay, background color of the ripple animation using the following data attributes:

<div class="ripple" 
     data-ripple-opacity="0.4" 
     data-ripple-background="#fff" 
     data-ripple-expanse-delay="300">
     Tap Me!
</div> 

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