Configurable Material Ripple Tap Effect - jQuery touch-ripple
File Size: | 5.18 KB |
---|---|
Views Total: | 1329 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.