/* 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); })
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter