Tiny Cross-platform Ripple Animation Library – ripple.js

Preview:

Description:

ripple.js is a simple, lightweight JavaScript library for creating Google Material Design inspired ripple effects that work on both desktop and mobile devices.

Basic usage:

Download and add the minified version of ripple.js into your html document.

<script src="ripple.min.js"></script>

Initialize the Ripple.js on page load.

window.onload = function() {
  ripple.registerRipples();
}

Config the ripple effect with the following attributes.

• ripple-color: The background of the ripple. Also accepts background images.
• ripple-opacity: The opacity of the ripple.
• ripple-shadow: The box-shadow of the ripple.
• ripple-press-expand-time: The time the ripple needs to fully expand while the element is being pressed.
• ripple-release-expand-time: The time the ripple needs to ripple away when the user releases the mouse / touch.
• ripple-leave-collapse-time: The time the ripple collapses in itselft when the user moves the touch / mousepress away from the element.

<div class="ripple"  
     ripple-color="DarkMagenta" 
     ripple-opacity="0.9">
</div>

Execute a callback after the ripple effect is triggered.

document.getElementById('container').addEventListener('ripple-button-click', function() {
  alert('The element got succesfully clicked!');
});