Four types of SVG-based Material Design-style buttons click special wave effects, svgmaterial

Four types of SVG-based Material Design-style buttons click special wave effects, svgmaterial

Svgripples is a very cool-looking SVG-based Material Design style button. There are four different effects for this button Wave Effect: Circular wave, circular gradient wave, polygon wave, and linear gradient wave. In the special effect, the combination of TweenMax. js and SVG produces click wave effects that are exclusive to others.

Download Online Preview source code

Production Method HTML Structure

The code of the SVG Element Used by clicking this button is very simple. SVG used<symbol>Element-it is used to define reusable symbols. And<symbol>Element placement requires SVG graphics.

12345678

<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"            xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">    <symbol id="ripply-scott" viewBox="0 0 100 100">      <circle id="ripple-shape" cx="1" cy="1" r="1"/>    </symbol>  </svg></div>

To use<symbol>Element, used on the button<use>Element-it can reuse a predefined SVG image multiple times in the SVG image. It usesxlink:hrefProperty to point to<symbol>The ID of the element.

123456

<button id="js-ripple-btn" class="button styl-material">  Click for Ripple  <svg class="ripple-obj" id="js-ripple">    <use width="100" height="100" xlink:href="#ripply-scott" class="js-ripple"></use>  </svg></button>

CSS style

The main CSS style of clickwave has only two sentences:

1234567891011121314

.ripple-obj {  height: 100%;  pointer-events: none;  position: absolute;  top: 0;  left: 0;  z-index: 0;  width: 100%;  fill: #0c7cd5;} .ripple-obj use {  opacity: 0;}

Because you only need.ripple-objTo generate a click Wave Effect on the parent element of, so usepointer-events: none;To prevent the creation of click waves on SVG.

Click wave is invisible at the beginning, so set its transparency to 0. In addition, the waveform object is placed in the upper left corner of the button.

JAVASCRIPT

To make the dynamic button click effect, the GreenSock's TweenMax library is used in the special effect to create SVG animation.rippleAnimation()Function is the main animation function for the whole click wave effect.

123456789101112131415161718192021222324252627282930313233343536

function rippleAnimation(event, timing) {    var tl           = new TimelineMax();        x            = event.offsetX,        y            = event.offsetY,        w            = event.target.offsetWidth,        h            = event.target.offsetHeight,        offsetX      = Math.abs( (w / 2) - x ),        offsetY      = Math.abs( (h / 2) - y ),        deltaX       = (w / 2) + offsetX,        deltaY       = (h / 2) + offsetY,        scale_ratio  = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));    tl.fromTo(ripple, timing, {      x: x,      y: y,      transformOrigin: '50% 50%',      scale: 0,      opacity: 1,      ease: Linear.easeIn    },{      scale: scale_ratio,      opacity: 0    });     return tl;  }   return {    init: function(target, timing) {      var button = document.getElementById(target);       button.addEventListener('click', function(event) {        rippleAnimation.call(this, event, timing);      });    }  };})();