/* 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);
})
Ripple click effect.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.