- CDN (Content Delivery Network)
<script src="https://unpkg.com/@erichsia7/ripple@latest/dist/index.min.js"></script>
- npm
const ripple = require('@erichsia7/ripple')
Notice that you need to transpile it from TypeScript to native JavaScript (es6) to ensure that browser can conduct it.
ripple.addTo(selector, color, duration, callback)
Selector is a query selector string like .button, .container .button, or .button,.button2[attribute="1"].
Color can comes in any format that is supported by browser like #000000, rgba(0, 0, 0, 0.5), or var(--custom-css-variable).
Duration is a time parameter for animation of a ripple effect, and it's measured in million seconds.
Callback is a function that you want to execute when the animation end. If it has a selector including multiple elements, you need to use an array to load up all the functions like [ function() {/*...*/}, function() {/*...*/} ].