Ripple Anchor
Ripple Anchor provides a material “ink ripple” interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
Note: Safari (Version 12.0.2) customElement API doesn't support classes extend from non-HTMLElement.
Basic Usage
<msc-ripple-anchor>
is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ripple-anchor>
's html structure and everything will be all set.
Required Script
<script async src="https://your-domain/pack-msc-ripple-anchor.js"> </script>
Structure
Add attribute “is
” to the anchor element which you like to bring ripple effect with it.
Note: the “is
” value must be msc-ripple-anchor
.
<a href="#link" is="msc-ripple-anchor"> CLICK ME </a>
JavaScript Instantiation
<msc-ripple-anchor>
could also use JavaScript to create DOM element. Here comes some examples.
<script> var nodeAPI, nodeClasses; //use DOM api nodeAPI = document.createElement('a', {is:'msc-ripple-anchor'}); nodeAPI.href = '#link'; nodeAPI.textContent = 'CLICK ME'; document.body.appendChild(nodeAPI); //new Classes nodeClasses = new MscRippleAnchor(); nodeClasses.href = '#link'; nodeClasses.textContent = 'CLICK ME'; document.body.appendChild(nodeClasses); </script>
Style Customization
<msc-ripple-anchor>
uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.
<style> msc-ripple-anchor { --ripple-color: rgba(0,0,0,.1); --ripple-timing-function: cubic-bezier(0,0,.21,1); --ripple-duration: 1s; } </style>