joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix link-hover animation glitch

Browse source
This commit is contained in:
Joshua Seigler 2025-06-10 10:55:53 -04:00
parent b91bb04c2e
commit 235dbd9854
2 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

44
site/_includes/base.njk
View file

@ -41,27 +41,37 @@ title: Joshua's Homepage
document.addEventListener("scroll", setScrollAmount); document.addEventListener("scroll", setScrollAmount);
document.addEventListener("resize", setScrollAmount); document.addEventListener("resize", setScrollAmount);
function rippleListener(el) { function rippleListener(el) {
return (evt) => { return(evt) => {
const { const {top, right, bottom, left} = evt.target.getBoundingClientRect();
top,
right,
bottom,
left,
} = evt.target.getBoundingClientRect();
const effects = body.querySelector("#effects"); const effects = body.querySelector("#effects");
const newEffect = document.createElement("div"); const newEffect = document.createElement("div");
newEffect.classList.add("effect-instance"); newEffect.classList.add("effect-instance");
const padding = '10rem'; const padding = '10rem';
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`; newEffect.style.top = `calc(${
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`; top + window.scrollY
newEffect.style.width = `calc(${right - left}px + 2 * ${padding})`; }px - ${padding})`;
newEffect.style.height = `calc(${bottom - top}px + 2 * ${padding})`; newEffect.style.left = `calc(${
newEffect.style.borderRadius = `${Math.min(bottom - top, right - left) / 2}px`; left + window.scrollX
}px - ${padding})`;
newEffect.style.width = `calc(${
right - left
}px + 2 * ${padding})`;
newEffect.style.height = `calc(${
bottom - top
}px + 2 * ${padding})`;
newEffect.style.borderRadius = `${
Math.min(bottom - top, right - left) / 2
}px`;
effects.appendChild(newEffect); effects.appendChild(newEffect);
const reverser = () => { const reverser = () => {
newEffect.getAnimations().forEach(anim => { newEffect.getAnimations().forEach(anim => {
if (anim.currentTime < 100) {
anim.pause();
effects.removeChild(newEffect);
return;
}
anim.pause(); anim.pause();
anim.updatePlaybackRate(5); anim.updatePlaybackRate(1.5);
anim.reverse(); anim.reverse();
anim.addEventListener('finish', () => { anim.addEventListener('finish', () => {
if (effects.contains(newEffect)) { if (effects.contains(newEffect)) {
@ -69,14 +79,16 @@ title: Joshua's Homepage
} }
}); });
}); });
} };
el.addEventListener('mouseleave', reverser); el.addEventListener('mouseleave', reverser);
el.addEventListener('blur', reverser); el.addEventListener('blur', reverser);
} }
} }
Array.from(document.querySelectorAll('a[href],.nav-toggle-button')).forEach(el => { Array.from(
document.querySelectorAll('a[href],.nav-toggle-button,button,input[type="button"],input[type="submit"],input[type="reset"]')
).forEach(el => {
el.addEventListener('mouseenter', rippleListener(el)); el.addEventListener('mouseenter', rippleListener(el));
el.addEventListener('focus', rippleListener(el)); el.addEventListener('focus', rippleListener(el));
}); });
</script> </script>
</html> </html>

2
site/_includes/css/site.css
View file

@ -643,5 +643,5 @@ body .isso-post-action {
position: absolute; position: absolute;
border-radius: 0.5rem; border-radius: 0.5rem;
background: radial-gradient(ellipse farthest-side at 50% 50%, var(--c-accent) 25%, transparent); background: radial-gradient(ellipse farthest-side at 50% 50%, var(--c-accent) 25%, transparent);
animation: 5s ease normal forwards ripple; animation: 10s ease-in normal forwards ripple;
} }