jQuery Plugin For CSS3 Based Ripple Click Effect - yarp.js

File Size: 5 KB
Views Total: 3936
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For CSS3 Based Ripple Click Effect - yarp.js

Yet another jQuery plugin that implements the Material Design inspired ripple animation on any clickable elements using CSS3 transforms and transitions.

How to use it:

1. Load the minified version of the jQuery yarp.js after jQuery library (slim build).

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="yarp.min.js"></script>

2. Initialize the plugin on the target element and done.

$('.element').yarp();

3. Create your own color array for the ripple effect.

$('.element').yarp({

  // Colors to be used randomly
  colors: ['gray']
  
});

4. Set the duration of the ripple effect.

$('.element').yarp({

  // in milliseconds
  duration: 750

});

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