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>