jQuery Plugin for ripple effect inspired by Google Material Design concept ripple effects on HTML elements (such as UI buttons) when clicked or touched. Based on CSS3 transform properties, animations, border radii, keyframes, and opacity properties.

jquery ripples, javascript water ripple effect mouse over, jquery ripples cdn, water ripple effect javascript, water ripple effect jquery

How to make use of it:

1. Include the required jquery.ripple.css in the header section of the document.

<link rel="stylesheet" href="jquery.ripple.css">

2. Include the latest version of the jQuery library and the jQuery ripple.js script.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.ripple.js"></script>

3. Create a UI button where you would like to apply a doubling effect when clicked or touched.

<button>Click me</button>

4. Call the plugin on the button.

$('button').ripple();

5. Customize the interaction event and ripple effect color via JS Settings.

$('button').ripple({
  event: 'mousedown',
  color: '#fff'
});

jquery plugin to apply ripple effects to elements, jQuery-ripple Plugin/Github

See Demo And Download

Official Website(adamsea): Click Here

This superior jQuery/javascript plugin is developed by adamsea. For extra advanced usage, please go to the official website.