How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps🖱️⚪
Tags: css, javascript, html, webdev
Published: 2021-03-13 23:44:38

# 🔍 OVERVIEW
 
  So today you will build this cool ripple effect of the mouse cursor, using HTML5, CSS3 and JavaScript. 

   {% codepen https://codepen.io/Leoschmittk/pen/vYyPYKx %}

🎯 Let's think for a moment: what's it all about?  Indeed, wherever the user clicks on the page, a sort of wave pops up and  out (the effect). 

- So, we are using JS to check if the user has clicked and, if so, create the wave;
- The position of this sort of wave has to be in the point clicked by the cursor;
- Next, the CSS has the role of making the animation and style it , so we can see the effect;
- Also, when the animation finishes, the wave is vanished from the viewport;

It's pretty much using a simple logic, so let's jump in, I will explain as much as I can.

# 1st: JAVASCRIPT

```javascript
document.onclick = () => applyCursorRippleEffect(event); 

function applyCursorRippleEffect(e) {
   const ripple = document.createElement("div");
  
   ripple.className = "ripple";
   document.body.appendChild(ripple);

  ripple.style.left = `${e.clientX}px`;
  ripple.style.top = `${e.clientY}px`; 
  
   ripple.style.animation = "ripple-effect .4s  linear";
   ripple.onanimationend = () => document.body.removeChild(ripple);
  
}



```

- If the user has clicked anywhere in viewport, call the callback function  `applyCursorRippleEffect(event)`, as `event` an object carrying the `onclick` info;

- We declare `applyCursorRippleEffect(event)`, wherein `ripple` is created as a div element, receiving `ripple` as its class to CSS access it better, and, finally, putting it into the screen;


- Now, we have something, but no effect yet. The ripple effect has to be in the same local of the mouse cursor. To do so, `e.clientX` and `e.clientY` gives us a number that locates the cursor. They are properties of the `event`. With this info, we can say correctly the `left` and `top` of the `ripple` element. Remember to add `px` right after such numbers;

- Next, let's apply the `ripple-effect` to give magic to the `ripple element`, as an animation we are soon building with CSS;


- Lastly, `onanimationend` tells what  `ripple` element will do after its animation finishes, in this case, disappears from the screen by `document.body.removeChild(ripple);`;




# 2nd: CSS

```css

.ripple {
   width: 10px;
   height: 10px;
   background-color: transparent;
   position: fixed;
   border-radius: 50%;
   border: 1px solid $ffffff59;
}

@keyframes ripple-effect {
   to {
      transform:scale(15);
      opacity: 0.01;
   }
}
```

- Now in the `.css` file the element with class `ripple` is styled. The width and height are initially set to `15px` because the ripple starts little and ends big as we are adding this feature pretty soon. `position: fixed;` is necessary to fix the element in the position demanded in our script. Despite that, creativity is all opened.

- Wrapping up, we create the `ripple-effect` keyframe to say what's about with the animation. `transform: scale(15)` indicates that `ripple` will increase as it has to be. You could also increase directly the width and height, but this is not a good practice to animations performance, so here I use transform. Finally `opacity` accompanied  with the increased size makes the ripple effect.

- Keep in mind that you can make A LOT of really cool combinations, change the ripple shape, color, etc...

# ✔️ Windup 

   I appreciate your visit, and hope you found it interesting or learned something new. Goodbye 👋