Author: | Loyen |
---|---|
Views Total: | 4,915 views |
Official Page: | Go to website |
Last Update: | January 16, 2015 |
License: | MIT |
Preview:

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 });