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.

How to use it:

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

<link href="touch-ripple.css" rel="stylesheet">
<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').touch-ripple();

});

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

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

4. Set the default selector.

$('body').ripple({

  selector: '.touch-ripple'
  
});

5. Set the element to exclude.

$('body').ripple({

  exclude: '.no-touch-ripple'
  
});

6. Add a delay to the ripple effect.

<div class="touch-ripple" 
     data-touch-ripple-delay="100">
     Delay 100ms
</div>

Changelog:

2018-07-02

• add delay. remove transitionend event

2018-06-20

• Added transitions
• Refactor

---

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