rippleJS
Adds Material Design-style feedback ripples to your existing HTML without any dependencies. Show me the demos!
Usage
Include the rippleJS script (or use a local copy).
Then, add elements with the rippleJS
class within a parent element that has layout (aka, position: relative
or position: absolute
).
<button class="yourButton">
Click Me
<div class="rippleJS"></div>
</button>
<script src="https://cdn.rawgit.com/samthor/rippleJS/v1.0.2/ripple.min.js"></script>
<!-- or if using ES6 modules -->
<script type="module">
import 'https://cdn.rawgit.com/samthor/rippleJS/v1.0.2/ripple.min.js';
</script>
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:
<div class="optHolder">
<input type="checkbox" />
<div class="rippleJS fill"></div>
</div>
Ripple Color
The default color is a transparent version of the current color (aka, the currentColor
keyword).
To change this default, add the following style rule:
.rippleJS .ripple {
background: red;
}
You could also change it just for some elements:
.yourClassName .rippleJS .ripple {
background: blue;
}
Or change the level of opacity:
.moreOpaque .rippleJS .ripple {
opacity: 0.65;
}
Supports
Chrome, Safari, Firefox (all as of Dec 2014).
Requires classList
, so probably only supports IE10+.
Install
Instead of using rippleJS directly, you can fetch it using your favourite package manager:
$ bower install vanilla-ripplejs
$ npm install vanilla-ripplejs