Mouseover / mouseout with e.offset
Attached example is almost my goal, additionaly to it I want to run animation based on mouse position.
The part of code I have:
btn.addEventListener('mouseover', (e) => {
rect = btn.getBoundingClientRect();
offset = {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
x = e.pageX - offset.left;
y = e.pageY - offset.top;
ripple2.style.cssText = `
top: ${y}px;
left: ${x}p
Thanks for answer! Sorry for being unclear.
Better example of what I want to achieve:
See the Pen LYOJBX by kris-ellery (@kris-ellery) on CodePen
So, I want to have a ripple effect on mouseover, and reverse it on mouseout (instead of click, like in attached codepen link).
Note that animation happens in exactly clicked place on button, this is exactly what I'm asking about.
So to recap: I want to create ripple animation (like in attached