Анимация с места клика

Question

Как мне сделать так, чтобы анимация происходила именно на месте клика? Мне нужно, чтобы при клике блок не сразу закрашивался белым цветом, а анимация закрашивания блока начиналась с места клика, распространяясь на весь блок в виде волны, и после этого сразу же возвращался обратно красный цвет. Вот мой код:

#container {
  position: relative;
}

.block {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 100px;
  margin-bottom: 15px;
  box-shadow: 0px 1px 2px 1px #999;
  background-color: red;
}

.block:hover {
  cursor: pointer;
}

.block:active {
  background-color: white;
}

#num {
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  color: white;
}

<div id="container">
  <div class="block">
    <p id="num">1</p>
  </div>
  <div class="block">
    <p id="num">2</p>
  </div>
  <div class="block">
    <p id="num">3</p>
  </div>
</div>

Answer 1

Источник: https://geeklaunch.net/button-ripple-effect/index.html

var buttons = document.getElementsByTagName('button');

Array.prototype.forEach.call(buttons, function(b) {
  b.addEventListener('click', createRipple);
});

function createRipple(e) {
  var circle = document.createElement('div');
  this.appendChild(circle);

  var d = Math.max(this.clientWidth, this.clientHeight);

  circle.style.width = circle.style.height = d + 'px';

  var rect = this.getBoundingClientRect();
  circle.style.left = e.clientX - rect.left - d / 2 + 'px';
  circle.style.top = e.clientY - rect.top - d / 2 + 'px';


  circle.classList.add('ripple');

  let animated = document.querySelector('.ripple');

  animated.onanimationend = () => {
    animated.remove();
  };

}

button {
  font-family: "Roboto";
  font-size: 14px;
  padding: 1em 2em;
  margin: 3px;
  border: 0;
  outline: 0;
  color: white;
  background-color: #2196F3;
  text-transform: uppercase;
  border-radius: 0.15em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

button .ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

<button>ripple effects</button>
<button>ripple effects</button>
<button>ripple effects</button>
<button>ripple effects</button>
<button>ripple effects</button>

Answer 2

Как вариант:

$(document).ready(function() {
  $(".block").mousedown(function(e) {
    var puls = $(this).find(".puls");
    puls.removeClass("animate");
    var x = parseInt(e.pageX - $(this).offset().left) - (puls.width() / 2);
    var y = parseInt(e.pageY - $(this).offset().top) - (puls.height() / 2);
    puls.css({
      top: y,
      left: x
    }).addClass("animate");
  });
});

#container {
  position: relative;
}

.block {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 100px;
  margin-bottom: 15px;
  box-shadow: 0px 1px 2px 1px #999;
  background-color: red;
  user-select: none;
  transition: 0.1s ease-in;
}

.block:hover {
  cursor: pointer;
}

#num {
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  color: white;
}

.puls {
  position: relative;
  height: 50px;
  width: 50px;
  margin-top: -100px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(0);
}

.animate {
  animation: puls 0.7s linear;
}

@keyframes puls {
  100% {
    background-color: white;
    transform: scale(20);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="block">
    <p id="num">1</p>
    <div class="puls"></div>
  </div>
  <div class="block">
    <p id="num">2</p>
    <div class="puls"></div>
  </div>
  <div class="block">
    <p id="num">3</p>
    <div class="puls"></div>
  </div>
</div>

БЛОГ НА HUSL

Анимация с места клика

Ответы (2 шт):