62 lines
2 KiB
JavaScript
62 lines
2 KiB
JavaScript
'use strict'
|
|
|
|
const body = document.documentElement || document.body;
|
|
function setScrollAmount() {
|
|
body.style.setProperty("--scrollLengthPx", body.scrollTop);
|
|
}
|
|
setScrollAmount();
|
|
document.addEventListener("scroll", setScrollAmount);
|
|
document.addEventListener("resize", setScrollAmount);
|
|
function rippleListener(el) {
|
|
return(evt) => {
|
|
const rects = Array.from(evt.target.getClientRects());
|
|
Array.from(evt.target.children).forEach(child => {
|
|
rects.push(...Array.from(child.getClientRects()));
|
|
});
|
|
rects.forEach(rect => {
|
|
const {top, left, width, height} = rect;
|
|
const effects = body.querySelector("#effects");
|
|
const newEffect = document.createElement("div");
|
|
newEffect.classList.add("effect-instance");
|
|
const padding = '10rem';
|
|
newEffect.style.top = `calc(${
|
|
top + window.scrollY
|
|
}px - ${padding})`;
|
|
newEffect.style.left = `calc(${
|
|
left + window.scrollX
|
|
}px - ${padding})`;
|
|
newEffect.style.width = `calc(${
|
|
width
|
|
}px + 2 * ${padding})`;
|
|
newEffect.style.height = `calc(${
|
|
height
|
|
}px + 2 * ${padding})`;
|
|
effects.appendChild(newEffect);
|
|
const reverser = () => {
|
|
newEffect.getAnimations().forEach(anim => {
|
|
if (anim.currentTime < 100) {
|
|
anim.pause();
|
|
effects.removeChild(newEffect);
|
|
return;
|
|
}
|
|
anim.pause();
|
|
anim.updatePlaybackRate(0.25);
|
|
anim.reverse();
|
|
anim.addEventListener('finish', () => {
|
|
if (effects.contains(newEffect)) {
|
|
effects.removeChild(newEffect);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
el.addEventListener('mouseleave', reverser);
|
|
el.addEventListener('blur', reverser);
|
|
});
|
|
}
|
|
}
|
|
Array.from(
|
|
document.querySelectorAll('a[href],.nav-toggle-button,button,input')
|
|
).forEach(el => {
|
|
el.addEventListener('mouseenter', rippleListener(el));
|
|
el.addEventListener('focus', rippleListener(el));
|
|
});
|