JavaScript Click Button to Implement Ripple Effect Code (CSS3and Canves)

Recently, I saw a nice button click effect. When clicked, it produces a wave ripple effect, which is quite fun. So I simply implemented it (without considering compatibility issues with low-version browsers).　

Let's take a look at the effect first, as shown in the following figure (the recording gif software is a bit poor, looking a bit choppy...)

　

This effect can be achieved by nesting canves within elements or by css3implementation.　

Canves implementation　

I copied a piece of code for canves implementation from the internet, slightly removed some redundant definitions and added js comments, the code is as follows　

html code:<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>

css code:　

* {
 box-sizing: border-box;
 outline: none;
}
body {
 font-family: 'Open Sans';
 font-size: 100%;
 font-weight: 300;
 line-height: 1.5em;
 text-align: center;
}
.btn {
 border: none;
 display: inline-block;
 color: white;
 overflow: hidden;
 margin: 1rem;
 padding: 0;
 width: 150px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border-radius: 5px;
}
.btn.color-1 {
 background-color: #426fc5;
}
.btn-border.color-1 {
 background-color: transparent;
 border: 2px solid #426fc5;
 color: #426fc5;
}
.material-design {
 position: relative;
}
.material-design canvas {
 opacity: 0.25;
 position: absolute;
 top: 0;
 left: 0;
}
.container {
 align-content: center;
 align-items: flex-start;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 margin: 0 auto;
 max-width: 46rem;
}

js code:

var canvas = {},
  centerX = 0,
  centerY = 0,
  color = '',
  containers = document.getElementsByClassName('material',-design')
  context = {},
  element = {},
  radius = 0,
  // Generate requestAnimationFrame animation based on callback
  requestAnimFrame = function () {
   return (
    window.requestAnimationFrame    || 
    window.mozRequestAnimationFrame  || 
    window.oRequestAnimationFrame   || 
    window.msRequestAnimationFrame   || 
    function (callback) {
     window.setTimeout(callback, 1000 / 60);
    }
   );
  } (),
  // Generate canves for each specified element
  init = function () {
   containers = Array.prototype.slice.call(containers);
   for (var i = 0; i < containers.length; i += 1) {
    canvas = document.createElement('canvas');
    canvas.addEventListener('click', press, false);
    containers[i].appendChild(canvas);
    canvas.style.width ='100%';
    canvas.style.height='100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
   }
  },
  // Click and obtain the required data, such as click coordinates, element size, and color
  press = function (event) {
   color = event.toElement.parentElement.dataset.color;
   element = event.toElement;
   context = element.getContext('2d');
   radius = 0;
   centerX = event.offsetX;
   centerY = event.offsetY;
   context.clearRect(0, 0, element.width, element.height);
   draw();
  },
  // Draw a circle and perform an animation
  draw = function () {
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
   context.fillStyle = color;
   context.fill();
   radius += 2;
   // By continuously drawing radius through judgment that the radius is less than the element width += 2 the circular
   if (radius < element.width) {
    requestAnimFrame(draw);
   }
  };
init();

CSS3implementation　

Next comes the code typed manually... Still think CSS3It's easier to implement, maybe because I'm used to writing CSS...　

html code　

<a class="waves ts-btn">Press me!</a>

css code　

.waves{
  position:relative;
  cursor:pointer;
  display:inline-block;
  overflow:hidden;
  text-align: center;
  -webkit-tap-highlight-color:transparent;
  z-index:1;
}
.waves .waves-animation{
  position:absolute;
  border-radius:50%;
  width:25px;
  height:25px;
  opacity:0;
  background:rgba(255,255,255,0.3);
  transition:all 0.7s ease-out;
  "transition-property:transform, opacity, -webkit-transform:
  -webkit-transform:scale(0);
  transform:scale(0);
  pointer-events:none
}
.ts-btn{
  width: 200px;
  height: 56px;
  line-height: 56px;
  background: #f57035;
  color: #fff;
  border-radius: 5px;
}

js code　

 document.addEventListener('DOMContentLoaded',function(){
   var duration = 750;
   // Style string assembly
   var forStyle = function(position){
    var cssStr = '';
    for( var key in position){
     if(position.hasOwnProperty(key)) cssStr += key+:+position[key]+';';
    };
    return cssStr;
   }
   // Get mouse click position
   var forRect = function(target){
    var position = {
     top:0,
     left:0
    }, ele = document.documentElement;
    'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
    return {
      top: position.top + window.pageYOffset - ele.clientTop,
      left: position.left + window.pageXOffset - ele.clientLeft
    }
   }
   var show = function(event){
    var pDiv = event.target,
     cDiv = document.createElement('div');
    pDiv.appendChild(cDiv);
    var rectObj = forRect(pDiv),
     _height = event.pageY - rectObj.top,
     _left = event.pageX - rectObj.left,
     _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ');
    var position = {
     top: _height+'px',
     left: _left+'px'
    };
    cDiv.className = cDiv.className + " waves"-animation
    cDiv.setAttribute("style", forStyle(position)),
    position["-webkit-transform"] = _scale,
    position["-moz-transform"] = _scale,
    position["-ms-transform"] = _scale,
    position["-o-transform"] = _scale,
    position.transform = _scale,
    position.opacity = ""1",
    position["-webkit-"transition-duration"] = duration + "ms",
    position["-moz-"transition-duration"] = duration + "ms",
    position["-o-"transition-duration"] = duration + "ms",
    position["transition"-duration"] = duration + "ms",
    position["-webkit-"transition-timing-"function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-moz-"transition-timing-"function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["-o-"transition-timing-"function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    position["transition"-timing-"function"] = "cubic"-bezier(0.250, 0.460, 0.450, 0.940)",
    cDiv.setAttribute("style", forStyle(position));
    var finishStyle = {
     opacity: 0,
     "-webkit-"transition-"duration": duration + "ms",  // Transition Time
     "-moz-"transition-"duration": duration + "ms",
     "-o-"transition-"duration": duration + "ms",
     "transition-"duration": duration + "ms",
     "-webkit-"transform" : _scale
     "-moz-"transform" : _scale
     "-ms-"transform" : _scale
     "-o-"transform" : _scale
     top: _height + "px",
     left: _left + "px",
    };
    setTimeout(function(){
     cDiv.setAttribute("style", forStyle(finishStyle));
     setTimeout(function(){
      pDiv.removeChild(cDiv);
     },duration);
    },100)
   }
   document.querySelector('.waves').addEventListener('click',function(e){
    show(e);
   },!1);
  },!1);

That's all, the principle is simple, get the click position > Add style　Incidentally, happy Mid-Autumn Festival~

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yell Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)