Visual effect on click or touch with pure Javascript and CSS

I have a responsive webpage which contains pictures and text and is designed to be viewed on a mobile device. I would like to add visual effects such that whenever a user touches or clicks on the page something happens at the point of contact (eg. a ripple or expanding circle).

Ideally I could put a bunch of different visual effects in a CSS file and pick the effect I want by adding the effects corresponding class to the page.

I can already detect the clicks and touches in JavaScript and know their co-ordinates, I just don’t know how to make an effect happen at the co-ordinates.

The following website does what I want on a blank page Andrew Gilmore. Unfortunately it uses jQuery and various other libraries, I am after pure JavaScript and CSS. I do not know enough jQuery to transpile to JavaScript.

The following website Mary Lou has a nice library of effects embedded in the htmls <style> element (click ‘view demo’). Unfortunately the effects are tied to buttons not to screen position clicks and touches, and my attempts to make them work on the screen have failed.

Based on 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;
}

And her is the jQuery plus velocity.js that I want to translate into pure JavaScript.

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);

My JavaScript and CSS skills are average, so a simplified working answer to get me started would be enough for me to work out the rest. Given the co-ordinates, how do I get a visual effect to happen at them?

1 thought on “Visual effect on click or touch with pure Javascript and CSS”

  1. You can use a library like animate.css to provide you with predefined CSS animations. You would apply the CSS classes corresponding to the desired animation to the element you wish to animate, either within the element’s class attribute itself, or add them to the classList with JavaScript at the desired event trigger, such as a click or scroll event. Many such animations depend on the IntersectionObserver, which detects when an element enters and exits the viewport.

    Reply

Leave a Comment