Rippleria is a lightweight jQuery plugin that adds material design ripple click/tap effect on the HTML elements. You can implement this either with an attribute or method.
When you tap on an element you will see the drop like animation.
Contents
1. Download and include
- The plugin is available on GitHub from where you can download it.
- Add CSS in page <head> section.
<link href='rippleria-master/css/jquery.rippleria.css' rel='stylesheet' type='text/css'>
- Include plugin script with the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src='rippleria-master/js/jquery.rippleria.js' type='text/javascript'></script>
2. With Attribute
Add data-rippleria attribute to the HTML element while creating.
Example
<div data-rippleria > <img src='image.jpg' width='100%' > </div> <button data-rippleria >Click</button>
Output
Click on the image or button to see the animation.
Customize
There is some more data attribute that you use to customize default effect like – color, duration.
- data-rippleria-color – Specify the color code that you want to view on tap.
- data-rippleria-duration – With this, you can specify animation duration. This takes value in milliseconds ( 1 sec = 1000 milliseconds ).
Example
<div data-rippleria data-rippleria-color="#9afd87" data-rippleria-easing="ease-in" data-rippleria-duration="5000" > <img src='image.jpg' width='100%' > </div>
Output
Click on the image or button to see the animation
3. rippleria() method
You can use the rippleria() method to apply the effect on the selected selector.
Example
<script>
$(document).ready(function(){
$('div').rippleria();
$('button').rippleria();
});
</script>
<div >
<img src='image.jpg' width='100%' >
</div>
<button >Click</button>
Output
Click on the image or button to see the animation.
Customize
Use options to change the default effects.
- color – Specify color code.
- duration – How long animation could run. This also takes time in milliseconds ( 1 sec = 1000 milliseconds ).
You can either specify options value while initializing or separately.
Example
In the example, I am using both of the ways of option initializing.
<script>
$(document).ready(function(){
$('div').rippleria({
// aniamtion speed
duration: 5000,
// custom easing effect
easing: 'linear',
// custom color
color: '#9afd87',
// enable automatically adding .rippleria-dark class to the dark elements (appeared with 1.3)
detectBrightness: true
});
$('button').rippleria();
$('button').rippleria("changeDuration", "3000");
$('button').rippleria("changeEasing", "ease-in-out");
$('button').rippleria("changeColor", "#8877ff");
});
</script>
<div >
<img src='image.jpg' width='100%' >
</div>
<button >Click</button>
Output
Click on the image or button to see the animation.
4. Conclusion
This plugin is inspired by material design and this you can use to add eye-catching animation effect on tap.
You need to put an image element in a container or any other HTML element to add a ripple effect.
If you found this tutorial helpful then don't forget to share.