🔍 OVERVIEW

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

🎯 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

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

.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 👋