Material design ripple click with Rippleria – jQuery

Rippleria is a lightweight jQuery plugin which adds material design ripple click/tap effect on the HTML elements. You can implement this either with attribute or method.

When you tap on an element you will see the drop like animation.

Material design ripple click with Rippleria - jQuery


Contents

  1. Download and include
  2. With Attribute
  3. rippleria() method
  4. Conclusion

 


 

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 your color code that you want to view on tap.
  • data-rippleria-duration – With this, you can specify animation duration. This take 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 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 image element in a container or any other HTML element to add ripple effect.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *