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

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

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="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<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>
$(function(){
  $('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.