2 Demos of Google’s Material Design inspired jQuery ripple effect plug-in

Create ripple effect

The yarp.js is a Material design inspired jQuery plug-in for creating the ripple effect in HTML elements. The plug-in is the just 1Kb size and it is very simple to use.

All you have to do is include the JS file of the plug-in after the jQuery library and initiate the plug-in with two possible options. In the options, you may specify the color and ripple effect duration for the specified element.

Demo1 Demo2
Developer’s page Download plug-in

Setting up the yarp plug-in?

Include the JS file above the body closing tag:

  <script src=’http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js’></script>

<script src=’js/yet-another-ripple-plugin/yarp.min.js’></script>

Initiate the plug-in with color and duration options:

 

See the demos below with complete code.

A demo of ripple effect in a div element

In this example, the ripple effect is created in a div element. Click inside the div and you can see ripple effect happening in one-second duration with a specified color. A little CSS is also used for styling the div initially:

jQuery ripple effect

See online demo and code

The jQuery code:

 

The markup:

 

The CSS:

 

A demo of creating ripple effect in a button

You may create the ripple effect in different elements as using this nice plug-in. In the following demo, the ripple effect is created in Bootstrap button. Just like the above example, the duration and color options are specified in the jQuery code:

See online demo and code

The code:

 

See the output in the demo page.