19 lines
799 B
JavaScript
19 lines
799 B
JavaScript
export default function enableRippleEffect(container) {
|
|
container
|
|
.querySelectorAll('.hover-ripple-animate')
|
|
.forEach(link => {
|
|
link.addEventListener('mouseenter', e => {
|
|
const rect = link.getBoundingClientRect();
|
|
const ripple = document.createElement('span');
|
|
ripple.classList.add('ripple-effect');
|
|
|
|
const size = Math.max(rect.width, rect.height);
|
|
ripple.style.width = ripple.style.height = `${size}px`;
|
|
ripple.style.left = `${e.clientX - rect.left}px`;
|
|
ripple.style.top = `${e.clientY - rect.top}px`;
|
|
|
|
link.appendChild(ripple);
|
|
ripple.addEventListener('animationend', () => ripple.remove());
|
|
});
|
|
});
|
|
} |