https://github.com/samthor/ripplejs
vanilla Material Design ripples
https://github.com/samthor/ripplejs
javascript material-design ripple
Last synced: 6 months ago
JSON representation
vanilla Material Design ripples
- Host: GitHub
- URL: https://github.com/samthor/ripplejs
- Owner: samthor
- License: mit
- Created: 2014-12-13T22:16:01.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-09-22T14:52:37.000Z (about 7 years ago)
- Last Synced: 2025-03-31T05:08:11.424Z (6 months ago)
- Topics: javascript, material-design, ripple
- Language: JavaScript
- Homepage: https://samthor.github.io/rippleJS
- Size: 294 KB
- Stars: 192
- Watchers: 4
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rippleJS
Adds Material Design-style feedback ripples to your existing HTML without any dependencies.
[Show me the demos!](http://samthor.github.io/rippleJS)
## Usage
Include the [rippleJS script](https://cdn.rawgit.com/samthor/rippleJS/v1.0.2/ripple.min.js) (or use a [local copy](#install)).
Then, add elements with the `rippleJS` class within a parent element that has layout (aka, `position: relative` or `position: absolute`).
```html
Click Me
import 'https://cdn.jsdelivr.net/npm/vanilla-ripplejs@1.0.6';
```
rippleJS adds handlers on `document.body`, so you don't need to register any new elements as you add them to the DOM.
It supports touch and mouse events (even at the same time), and includes its own CSS.
### Ripple Fill
By adding the `fill` class to a `rippleJS` element, the ripple will fill to rounded corners, good for form elements with fixed size.
For example:
```html
```
### Ripple Color
The default color is a transparent version of the current color (aka, the `currentColor` [keyword](http://www.w3.org/TR/css3-color/#currentcolor)).
To change this default, add the following style rule:
```css
.rippleJS .ripple {
background: red;
}
```
You could also change it just for some elements:
```css
.yourClassName .rippleJS .ripple {
background: blue;
}
```
Or change the level of opacity:
```css
.moreOpaque .rippleJS .ripple {
opacity: 0.65;
}
````
## Supports
Chrome, Safari, Firefox (all as of Dec 2014).
Requires `classList`, so probably [only supports IE10+](http://caniuse.com/#feat=classlist).
## Install
Instead of using rippleJS directly, you can fetch it using your favourite package manager:
$ bower install vanilla-ripplejs
$ npm install vanilla-ripplejs
You can either use `ripple.min.js` for a precompiled version to just drop into your site, or you could use `lib.js` included as a ES module.
If you use `lib.js`, you'll need to include the CSS too—check out `ripple.js` for how this is done for the minified version, or you could just add the CSS to your regular styles.