How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪

? 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 an…


This content originally appeared on DEV Community and was authored by Leonardo Schmitt

? 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 = () => ripple.style.display = "none";

}

  • 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 carrying display:none;;

2nd: CSS 


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

@keyframes ripple-effect {
   to {
      width: 150px;
      height: 150px;
      opacity: 0.01;
      margin: -60px;
   }
}

  • Now in the .css file the element with class ripple is styled. Initially the width and height are set to 0, as the animation will change it. position: fixed; is necessary to fix the element in the position demanded in our script. Despite that, creativity is all opened.

  • Winding it up, we create the ripple-effect keyframe to say what's about with the animation. margin: -60px; indicates that ripple will locate at the center of the clicked area, and the opacity accompanied with the increased size makes the ripple effect.

✔️ Windup

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


This content originally appeared on DEV Community and was authored by Leonardo Schmitt


Print Share Comment Cite Upload Translate Updates
APA

Leonardo Schmitt | Sciencx (2021-03-13T23:44:38+00:00) How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪. Retrieved from https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/

MLA
" » How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪." Leonardo Schmitt | Sciencx - Saturday March 13, 2021, https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/
HARVARD
Leonardo Schmitt | Sciencx Saturday March 13, 2021 » How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪., viewed ,<https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/>
VANCOUVER
Leonardo Schmitt | Sciencx - » How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/
CHICAGO
" » How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪." Leonardo Schmitt | Sciencx - Accessed . https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/
IEEE
" » How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪." Leonardo Schmitt | Sciencx [Online]. Available: https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/. [Accessed: ]
rf:citation
» How to make a mouse ripple click effect with CSS, JS and HTML in 2 steps?️⚪ | Leonardo Schmitt | Sciencx | https://www.scien.cx/2021/03/13/how-to-make-a-mouse-ripple-click-effect-with-css-js-and-html-in-2-steps%f0%9f%96%b1%ef%b8%8f%e2%9a%aa/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts