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:
$('. ripple-demo).yarp({
colors: ['#316262'],
duration: 1000
});
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:
See online demo and code
The jQuery code:
$('.ripple-demo').yarp({
colors: ['#8CC6C6'],
duration: 1000
});
The markup:
<div class="ripple-demo"> Cleck here for ripple effect </div>
The CSS:
.ripple-demo {
position: relative;
width: 290px;
cursor: pointer;
background: #316262;
margin: 0 auto;
margin-top: 15px;
text-align: center;
padding: 20px 0;
color:#fff;
box-shadow: 0px 0px 20px -3px #006400;
}
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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
body {
background: #fff;
}
.ripple-demo {
position: relative;
width: 290px;
margin: 15px;
padding: 15px 0;
box-shadow: 0px 0px 20px -3px #006400;
}
</style>
</head>
<body>
<button class="ripple-demo btn btn-success" id="ripple-demo1">
Cleck the button
</button>
<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>
<script>
$('#ripple-demo1').yarp({
colors: ['#B0B000'],
duration: 1500
});
</script>
</body>
</html>
See the output in the demo page.