Android L Style Click/Touch Effects with jQuery and CSS3 - rippler

Android L Style Click/Touch Effects with jQuery and CSS3 - rippler
File Size: 282 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Rippler is Android L & Material Design inspired jQuery plugin used to create SVG based wave/ripple effects on your buttons (or any other Html elements) when clicked or tapped on. 

See also:

Basic Usage:

1. Include the necessary jQuery library and the jQuery rippler plugin's JS and CSS file in the document.

<link rel="stylesheet" href="path/to/rippler.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/rippler.min.js"></script>

2. Include the Bootstrap's CSS in the document so you can apply the ripple effects on any Bootstrap buttons (Optional).

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

3. Create a regular Bootstrap button with default ripple click effect.

<button class="btn btn-primary rippler rippler-default" href="#">Button</button>

4. Call the function on the button to enable the plugin.

$(document).ready(function() {
$(".rippler").rippler({
effectClass: 'rippler-effect',
effectSize: 16, // Default size (width & height)
addElement: 'div', // e.g. 'svg'(feature)
duration:  400
});
}); 

About Author:

Author: blivesta

Website: http://git.blivesta.com/rippler/


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