Author: | nash403 |
---|---|
Views Total: | 975 views |
Official Page: | Go to website |
Last Update: | February 26, 2018 |
License: | MIT |
Preview:

Description:
Ribble is a standalone vanilla JavaScript plugin that applies the Material Design ripple click/tap effect to any DOM element you specify.
How to use it:
Download and import the Ribble library into the document.
<script src="dist/ribble.js"></script>
Attach the Ribble to any element you prefer.
<div class="demo" id="example"></div>
var myElement = document.getElementById("example"); Ribble.attachEvent(myElement)
Customize the ripple effect.
Ribble.attachEvent(myElement, { // duration in milliseconds duration: 400, // z-index zIndex: "9999", // background color bgColor: "currentColor", // max opacity level maxOpacity: "0.4", // easing function easing: "cubic-bezier(0.4, 0, 0.2, 1)" })
Change the default trigger events.
Ribble.attachEvent(myElement, { // options here }, // default: ['mousedown', 'touchstart'] triggers)