Tiny Cross-platform Ripple Animation Library – ripple.js

Category: Accordion , Javascript | April 11, 2016
Author: SirBaaron
Views Total: 823
Official Page: Go to website
Last Update: April 11, 2016
License: MIT

Preview:

Tiny Cross-platform Ripple Animation Library – ripple.js

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!');
});