使用纯 Javascript 和 CSS 点击或触摸时的视觉效果答案

【问题标题】：Visual effect on click or touch with pure Javascript and CSS使用纯 Javascript 和 CSS 点击或触摸时的视觉效果
【发布时间】：2021-05-20 23:06:14
【问题描述】：

我有一个包含图片和文字的响应式网页，旨在在移动设备上查看。我想添加视觉效果，这样每当用户触摸或点击页面时，接触点就会发生一些事情（例如波纹或扩大的圆圈）。

理想情况下，我可以将一堆不同的视觉效果放在一个 CSS 文件中，然后通过将效果对应的类添加到页面来选择我想要的效果。

我已经可以在 JavaScript 中检测到点击和触摸并知道它们的坐标，我只是不知道如何在坐标上产生效果。

以下网站在空白页Andrew Gilmore 上执行我想要的操作。不幸的是，它使用 jQuery 和其他各种库，我追求纯 JavaScript 和 CSS。我不知道足够的 jQuery 来转译为 JavaScript。

以下网站 Mary Lou 有一个很好的效果库，嵌入在 htmls <style> 元素中（点击“查看演示”）。不幸的是，效果与按钮相关联，而不是屏幕位置点击和触摸，我试图让它们在屏幕上工作的尝试失败了。

基于 Andrew Gilmore 的 codepen。

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Click/Touch Visual Feedback</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="ping"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script>
  <script  src="./script.js"></script>
</body>
</html>

CSS

#ping {
  background-size: 100%;
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(228, 245, 252, 0) 0%, rgba(191, 232, 249, 0.45) 30%, #72cbf3 66%, rgba(112, 202, 243, 0) 67%, rgba(42, 176, 237, 0) 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(228, 245, 252, 0) 0%, rgba(191, 232, 249, 0.45) 30%, #72cbf3 66%, rgba(112, 202, 243, 0) 67%, rgba(42, 176, 237, 0) 100%);
  background-image: radial-gradient(ellipse cover at center, rgba(228, 245, 252, 0) 0%, rgba(191, 232, 249, 0.45) 30%, #72cbf3 66%, rgba(112, 202, 243, 0) 67%, rgba(42, 176, 237, 0) 100%);
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

而她就是我想翻译成纯 JavaScript 的 jQuery plus velocity.js。

jQuery

(function($){
  var $ping = $('#ping');
  
  $(document).on('touchstart click', function(e){
    e.stopPropagation();
    e.preventDefault();
    
    $ping.velocity({
      opacity: 1,
      width: 100,
      height: 100
    },
    {
      easing: 'easeIn',
      duration: 300,
      begin: function(event, elements) {
        $(elements).css({
          display: 'block',
          width: 0,
          height: 0,
          top: e.clientY || e.originalEvent.touches[0].pageY,
          left: e.clientX || e.originalEvent.touches[0].pageX,
          transform: 'translate(-50%, -50%)'
        });
      }.bind(null, e)
    }).velocity({
      opacity: 0,
      width: 200,
      height: 200
    },
    {
      easing: 'linear',
      duration: 300,
      delay: 250,
      queue: false,
      complete: function(elements) {
        $(elements).css({
          display: 'none'
        });
      }
    });
    
  });
})(jQuery);

我的 JavaScript 和 CSS 技能一般，所以让我开始的简化工作答案足以让我解决其余的问题。给定坐标，我如何在它们上产生视觉效果？

【问题讨论】：

对不起，我们只是给你代码通常是不受欢迎的。预计您至少可以提供一个尝试执行此操作但失败的基本代码。然后，我们可以帮助您修复代码以使其正常工作，但是从头开始创建东西通常在这里是题外话。您说您已经对此进行了尝试，因此请提供其中一种尝试，以便我们查看并尝试帮助您。总而言之，我只是要求您帮助我们，帮助您。
velocityjs.org 也可以在没有 jquery 的情况下工作。

标签： javascript css

【解决方案1】：

回答我自己的问题，以下代码有效。基本原则是：-

在样式表中定义径向渐变，当您单击/触摸页面时，这将从无到有扩展。径向渐变在椭圆框中定义渐变颜色。
在样式表中定义动画关键帧。这些是可以应用于径向渐变的动画。关键帧通常会改变径向渐变框的高度和宽度。
在脚本中定义代码以获取点击/触摸坐标，将径向渐变置于它们的中心，然后将径向渐变从零扩展到最大尺寸。动画结束后，ping 将恢复为隐藏状态。
请注意，要创建点击视觉效果库，您需要将关键帧和径向渐变对（如下面的 CSS 顶部）库。

这里是代码。

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="ping" class="example"></div>
  <script  src="./script.js"></script>
</body>
</html>

CSS

@keyframes example {
  0%   {height: 0%; width: 0%; }
  100% {height: 10%; width: 10%; }
}
.example {
  animation-name: example;
  animation-duration: 2s;
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(228, 245, 252, 0) 0%, rgba(191, 232, 249, 0.45) 30%, #72cbf3 66%, rgba(112, 202, 243, 0) 67%, rgba(42, 176, 237, 0) 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(228, 245, 252, 0) 0%, rgba(191, 232, 249, 0.45) 30%, #72cbf3 66%, rgba(112, 202, 243, 0) 67%, rgba(42, 176, 237, 0) 100%);
  background-image: radial-gradient(ellipse cover at center, rgba(228, 245, 252, 0) 0%, rgba(191, 232, 249, 0.45) 30%, #72cbf3 66%, rgba(112, 202, 243, 0) 67%, rgba(42, 176, 237, 0) 100%);
}

#ping {
  display: none;
  background-size: 100%;
  position: absolute;
}

JavaScript

function doTouch(event) {
  var clientX = event.touches[0].clientX;
  var clientY = event.touches[0].clientY;
  pingEffect(clientX, clientY);
}
function doClick(event) {
  // get the click co-ords
  var clientX = event.clientX;
  var clientY = event.clientY;
  pingEffect(clientX, clientY);
}

var pingName = 'example';

function pingEffect(clientX, clientY) {
  // get and position the ping element
  var ping = document.getElementById('ping');
  ping.style.left = clientX+'px';
  ping.style.top = clientY+'px';
  ping.style.transform = 'translate(-50%, -50%)';
  ping.style.display = 'block';
  // run the animation
  ping.classList.remove(pingName);
  void ping.offsetWidth; // trigger a DOM reflow
  ping.classList.add(pingName);
}
document.addEventListener('touchstart', doTouch);
document.addEventListener('click', doClick);

【讨论】：