@erichsia7/ripple v1.1.7
Ripple.js
Install
- 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.
Usage
ripple.addTo(selector, color, duration, callback)
Selector
Selector is a query selector string like .button
, .container .button
, or .button,.button2[attribute="1"]
.
Color
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
Duration is a time parameter for animation of a ripple effect, and it's measured in million seconds.
Callback
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() {/*...*/} ]
.
Demo
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago