Javascript/CSS: Ripple Effect - Vanilla

PHOTO EMBED

Mon Aug 29 2022 19:40:15 GMT+0000 (Coordinated Universal Time)

Saved by @marcopinero #javascript #css

/* css: 

.element{
    position: relative; <-- important to place effect span in element to be clicked 
}

.ripple{
    position: absolute;
    background-color:#fff;
    transform: translate(-50%,-50%);
    pointer-events: none;
    border-radius: 50%;
    animation: animate 0.5s linear infinite;   
}

@keyframes animate {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    100%{
        width: 800px;
        height: 800px;
        opacity: 0; 
    }
}
*/

element.addEventListener("click", (e)=>{
    var rect = e.target.getBoundingClientRect();
    let x=e.clientX - rect.x;
    let y=e.clientY - rect.y;
    let ripples = document.createElement('span');
    ripples.className="ripple";
    ripples.style.left = x + 'px';
    ripples.style.top = y + 'px';
    e.target.appendChild(ripples);
    setTimeout(()=>{
        ripples.remove();
    }, 500);
})
content_copyCOPY

Ripple click effect.