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:
|
1 2 3 4 5 6 7 |
$('. 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:
|
1 2 3 4 5 6 7 |
$('.ripple-demo').yarp({ colors: ['#8CC6C6'], duration: 1000 }); |
The markup:
|
1 2 3 4 5 |
<div class="ripple-demo"> Cleck here for ripple effect </div> |
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!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.