Material Design Click Ripple Effect In Vanilla Javascript – Material Touch

Category: Animation , Javascript | January 16, 2015
Author: Loyen
Views Total: 3,549
Official Page: Go to website
Last Update: January 16, 2015
License: MIT

Preview:

Material Design Click Ripple Effect In Vanilla Javascript – Material Touch

Description:

A vanilla JavaScript solution to create Google Material Design inspired click/tap ripple animations on your action buttons.

How to use it:

Load the Material Touch JS library at the end of the document.

<script src="js/md.js"></script>

Add the CSS class md-ripple to your action buttons.

<button class="md-ripple">Demo button</button>

The core CSS styles for the ripple animations.

.md-ripple {
  overflow: hidden;
  position: relative;
}

.md-ripple * { pointer-events: none; }

.md-ripple-effect {
  pointer-events: none;
  position: absolute;
  display: block;
  background: #000;
  width: 0;
  height: 0;
  border-radius: 100%;
  z-index: 1;
}

Enable the ripple animation.

new materialTouch('.md-ripple');

materialTouch() options.

// new materialTouch(rippleIdentifier, custom_options);

new materialTouch('.md-ripple', {

classes: {
  rippleContainer: 'md-ripple-wrapper',
  ripple: 'md-ripple-effect'
},

transition: {
  easing: 'easeOutExpo',
  delay: 0,
  duration: 600
},

opacity: 0.5,

size: 0.75,

center: false

});

You Might Be Interested In:


Leave a Reply