Author: | luncheon |
---|---|
Views Total: | 578 views |
Official Page: | Go to website |
Last Update: | May 17, 2021 |
License: | MIT |
Preview:

Description:
Ripplet.js is a lightweight vanilla JavaScript library which applies Material Design inspired ripple effects to any element using CSS properties. Written in Typescript.
Features:
- Highly customizable.
- Lightweight. Less than 3kb.
- Configurable animation.
- Custom trigger elements.
Basic usage:
Install it via NPM or include the compiled JavaScript in the document directly.
# NPM $ npm ripplet.js --save import ripplet from 'ripplet.js';
<!-- OR --> <script src="ripplet-declarative.min.js"></script>
Setup with inline markup.
<button data-ripplet>Default</button> <button data-ripplet="color: rgba( 64, 192, 255, .2); spreading-duration: 2s; clearing-delay: 1.8s;">Sky Blue Slow</button>
Setup with JavaScript.
- targetSuchAsMouseEvent: { currentTarget: Element, clientX: number, clientY: number }
- options: an array of options as introduced below
ripplet(targetSuchAsMouseEvent, options)
All possible options with default values.
{ className: '', color: 'rgba(0, 0, 0, .1)', opacity: null, spreadingDuration: '.4s', spreadingDelay: '0s', spreadingTimingFunction: 'linear', clearing: true, clearingDuration: '1s', clearingDelay: '0s', clearingTimingFunction: 'ease-in-out', centered: false, appendTo: 'body' }
Changelog:
v1.1.0 (05/17/2021)
- add appendTo: auto option: find the closest appendable element
v0.5.4 (04/13/2021)
- fixed build
v0.5.2 (03/28/2021)
- fix: misaligned when zoom is set on Safari.
v0.5.0 (03/16/2021)
- fix: ripple effects were not displayed under some conditions
v0.4.1 (03/13/2021)
- feat: allow css variables like `var(–primary-color)` to be specified for css-like options
v0.3.0 (08/08/2020)
- make ripplet remains until pointerup or pointerleave event occurs
v0.2.1 (07/04/2020)
- Supports RTL
v0.2.0 (05/30/2020)
- Support `currentColor` for the color option and change default options (color: currentColor, opacity: 0.1).
v0.1.13 (06/24/2018)
- fix ripplet coordinate appending to the parent that is a flexbox