Lets learn how you can use this tiny library to add an awesome ripple effect on your element.
Include the following two files in your web page -
<link href="stylesheet" type="text/css" href="ripple.css">
<script type="text/javascript" src="ripple.min.js">
This is a jQuery plugin. So you need jQuery before you importing ripple.js file.
Here is the full code of this framework -
$.ripple(".btn", {
debug: false, // Turn Ripple.js logging on/off
on: 'mousedown', // The event to trigger a ripple effect
opacity: 0.4, // The opacity of the ripple
color: "auto", // Set the background color. If set to "auto", it will use the text color
multi: false, // Allow multiple ripples per element
duration: 0.7, // The duration of the ripple
// Filter function for modifying the speed of the ripple
rate: function(pxPerSecond) {
return pxPerSecond;
},
easing: 'linear' // The CSS3 easing function of the ripple
});
Let's discuss one by one -
The only method ripple takes two argument. First is the element on which you want to activate the ripple effect and then Second argument specifies different option for customization. The first argument is the CSS query selector. You can use Id selector to target one element or you can use class selector to target multiple elements. If your CSS selector returns multiple element in the document, it will apply ripple effect to all of your button in the document that matches the query selector.
Second argument is an Object where you can set some options.
debug Normally you won't need it. If you set the value to true, upon clicking on the ripple effect attached button, there will be some log on the console.
opacity You can set the opacity of the ripple.
color It specifies the color of the ripple.
on This is an interesting setting. You can trigger the ripple effect depending on different. You can use mouseover, mouseup, mousedown or click.
duration It specifies the Duration of the ripple animation. The value is in second.
easing You can specify the CSS ease function here. You can use keywords like ease-in, ease-out, ease-in-out or you can even use cubic-bezier function. like the following.
multi It enables the multiple ripple effect on the element. Let's increase the duration to 5 second to make it understand clearer. And set multi to false. Click on the div and it will start ripple animation. While the ripple is animating, click again on the div. The first animation will end instantly and the new ripple will begin. Now set the multi to true. Follow the same process and you will see there's multiple ripple animation animating at the same time. Click on the div frequently at the same place and it will form like a water wave.
$.ripple(".button", {
easing: 'cubic-bezier(0.25,0.1,0.25,1)'
});
All of the above options are optional. If you don't have any options and want to use all the default values, you can pass only the selector.
$.ripple(".button");
Multiple setting for multiple element is not working. The settings are overlapping. All the ripple animation always takes the last element's setting in the order the ripple function are bieng called.