
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.
- Publication date: 16.06.2018
- Source