Material Water Ripple Effect With jQuery And CSS3 - jRipple

File Size: 7.95 KB
Views Total: 5791
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Material Water Ripple Effect With jQuery And CSS3 - jRipple

jRipple is an extremely lightweight jQuery plugin that uses CSS3 animations to create Material Design inspired water ripple effects with variable colors and animation speed on mouse click.

How to use it:

1. Add the latest version of jQuery library and the jQuery jRipple plugin into your webpage.

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="js/ripple.min.js"></script>

2. Call the function on the desired element where you want to display the water ripple effect once you click.

$('.ripple').ripple();

3. The core CSS/CSS3 styles for the water ripple effect.

.ink {
  display: block; 
  position: absolute;
  background: rgba(0,0,0,.6);
  border-radius: 100%;
  transform: scale(0);
}

@keyframes ripple {

  100% {opacity: 0; transform: scale(2.5);}

}

4. Change the default color and animation speed of the water ripple effect.

$('.ripple').ripple({
  color:'red',
  time:'.8s'
});

This awesome jQuery plugin is developed by mcdyzg. For more Advanced Usages, please check the demo page or visit the official website.