Skip to content
vanilla Material Design ripples
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit fff0d65 Sep 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs move docs from gh-pages Sep 22, 2018
.npmignore move docs from gh-pages Sep 22, 2018
LICENSE MIT license Sep 29, 2015
README.md 1.0.6 script Sep 22, 2018
bower.json added keywords Aug 15, 2015
lib.js Make events passive (#9) Sep 22, 2018
package.json v1.0.6 Sep 22, 2018
ripple.css animate only transform/opacity Jul 27, 2015
ripple.js v1.0.5, wrap in iife Jul 28, 2018
ripple.min.js v1.0.6 Sep 22, 2018
rippleJS.mov added demo video Dec 13, 2014
test.html module system Jul 28, 2018

README.md

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 async src="https://cdn.jsdelivr.net/npm/vanilla-ripplejs@1.0.6"
    integrity="sha384-OlarGErerEgz/M7123pQTTek4pUIiR6t0BK09bTmWDi2cZYbv3VHrriaXDnA0Oup"
    crossorigin="anonymous"></script>
<!-- or if using ES6 modules -->
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/vanilla-ripplejs@1.0.6';
</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

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.

You can’t perform that action at this time.