Questions tagged [ripplejs]

Demo: http://jakiestfu.github.io/Ripple.js/demo/
GitHub: https://github.com/jakiestfu/Ripple.js

Usage: Include jQuery, the ripple.css, and ripple.js into your page. Then upon initialization, you can activate ripple using $.ripple(selector,options):

Stack Snippet Starter Pack

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>

<button class="btn btn-primary btn-lg" >Click Me</button>

JavaScript

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});