Material Design's Ripple Effect Made Easy - PaperRipple.js

PaperRipple.js is a lightweight JavaScript library that allows web developers to easily add the Material Design ripple effect to any UI elements. Works with both Vanilla JavaScript and jQuery.

When users click or tap a UI element, a fading circular ripple emanates from the touchpoint. This provides visual feedback that the element was pressed without needing complex hover effects. PaperRipple enables adding this effect with just a few lines of code. 

See Also:

• 10 Best Material Ripple Click/Tap Effects In JavaScript/CSS

How to use it:

1. To get started, download and load the PaperRipple.js script in your project.

<!-- Required Stylesheet -->
<link rel="stylesheet" href="/dist/paper-ripple.min.css" />

<!-- Vanilla JavaScript -->
<script src="/dist/PaperRipple.min.js"></script>

<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/dist/PaperRipple.min.js"></script>

2. Apply the ripple effect to your UI elements like buttons.

// Vanilla JavaScript
var button = document.querySelectorAll('.myButtons');s
[].forEach.call(buttons, function(button) {
  var ripple = new PaperRipple();
  button.appendChild(ripple.$);
  button.addEventListener('mousedown', function(ev) {
    ripple.downAction(ev);
  });
  button.addEventListener('mouseup', function() {
    ripple.upAction();
  });
});

$(function(){ 
  $('.myButtons').paperRipple();
});

3. Customize the background color of the ripple overlay.

.paper-ripple {
  color: #ff0000;
}

4. Available options.

var ripple = new PaperRipple({

    // initial opacity from 0 to 1
    initialOpacity: 0.25,

    // how fast the ripple fades out.
    opacityDecayVelocity: 0.8,

    // If true, ripples will exhibit a gravitational pull towards the center of their container as they fade away
    recenters: false,

    // determine whether to center the ripple
    center: false,

    // if true, the ripple will apply within a circle.
    round: false,

    // target DOM element as the container for the ripple
    target: null,
    
});

---

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