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

improve effects, start adding search

Browse source
This commit is contained in:
Joshua Seigler 2025-06-11 16:50:47 -04:00
parent e2fb545d0b
commit 36554b5b7b
8 changed files with 184 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

123
assets/scripts/animations.js
View file

@ -1,62 +1,67 @@
'use strict'
"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);
});
// function setScrollAmount() {
// (document.documentElement || document.body).style.setProperty("--scrollLengthPx", body.scrollTop);
// }
// setScrollAmount();
// document.addEventListener("scroll", setScrollAmount);
// document.addEventListener("resize", setScrollAmount);
/** @param {Event} evt */
function addEffect({ target }) {
const effectsLayer = document.querySelector("#effects");
if (
target == null ||
!target["matches"] ||
!target.matches(
"a[href],.nav-toggle-button,button,input,label:not(:has(input))",
)
) {
return;
}
const rects = Array.from(target.getClientRects());
Array.from(target.children).forEach((child) => {
rects.push(...Array.from(child.getClientRects()));
});
rects.forEach((rect) => {
const { top, left, width, height } = rect;
const newEffect = document.createElement("div");
newEffect.__effectParent = target;
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})`;
effectsLayer.appendChild(newEffect);
});
}
Array.from(
document.querySelectorAll('a[href],.nav-toggle-button,button,input')
).forEach(el => {
el.addEventListener('mouseenter', rippleListener(el));
el.addEventListener('focus', rippleListener(el));
});
document.addEventListener("mouseenter", addEffect, true);
document.addEventListener("focus", addEffect, true);
/** @param {Event} evt */
function removeEffect({target}) {
const effectsLayer = document.querySelector("#effects");
const effects = Array.from(effectsLayer.children).filter(
(e) => e.__effectParent === target,
);
effects.forEach(e => {
e.getAnimations().forEach(anim => {
if (anim.currentTime < 100) {
anim.pause();
effectsLayer.removeChild(e);
return;
}
anim.pause();
anim.updatePlaybackRate(-0.25);
anim.play();
anim.addEventListener('finish', () => {
if (effectsLayer.contains(e)) {
effectsLayer.removeChild(e);
}
});
});
})
};
document.addEventListener('mouseleave', removeEffect, true);
document.addEventListener('blur', removeEffect, true);