54 lines
2.4 KiB
JavaScript
54 lines
2.4 KiB
JavaScript
(() => {
|
|
const heroes = document.querySelectorAll("[data-section-hero]");
|
|
if (!heroes.length) return;
|
|
|
|
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
if (reducedMotion) return;
|
|
|
|
heroes.forEach((hero) => {
|
|
const config = hero.classList.contains("section-hero--projects")
|
|
? { pathPad: 22, duration: 2800, durationRange: 2200, delay: 250, delayRange: 1100, start: 250, stagger: 500, edgeOpacity: 0.18, liveOpacity: 0.8, glitch: 9000 }
|
|
: hero.classList.contains("section-hero--articles")
|
|
? { pathPad: 20, duration: 2600, durationRange: 2200, delay: 300, delayRange: 1000, start: 250, stagger: 550, edgeOpacity: 0.15, liveOpacity: 0.78, glitch: 9800 }
|
|
: { pathPad: 20, duration: 2400, durationRange: 2300, delay: 250, delayRange: 900, start: 200, stagger: 520, edgeOpacity: 0.14, liveOpacity: 0.8, glitch: 7600 };
|
|
|
|
hero.querySelectorAll(".section-hero__packet").forEach((packet, index) => {
|
|
if (typeof packet.animate !== "function") return;
|
|
|
|
const length = packet.getTotalLength();
|
|
|
|
const animate = () => {
|
|
const reverse = Math.random() > 0.5;
|
|
const from = reverse ? -(length + config.pathPad) : config.pathPad;
|
|
const to = reverse ? config.pathPad : -(length + config.pathPad);
|
|
const duration = config.duration + Math.random() * config.durationRange;
|
|
const animation = packet.animate(
|
|
[
|
|
{ strokeDashoffset: String(from), opacity: config.edgeOpacity },
|
|
{ offset: 0.15, opacity: config.liveOpacity },
|
|
{ offset: 0.85, opacity: config.liveOpacity },
|
|
{ strokeDashoffset: String(to), opacity: hero.classList.contains("section-hero--projects") ? 0.15 : 0.12 },
|
|
],
|
|
{ duration, easing: "linear" },
|
|
);
|
|
|
|
if (animation.finished) {
|
|
animation.finished
|
|
.then(() => window.setTimeout(animate, config.delay + Math.random() * config.delayRange))
|
|
.catch(() => {});
|
|
} else {
|
|
window.setTimeout(animate, duration + config.delay + Math.random() * config.delayRange);
|
|
}
|
|
};
|
|
|
|
window.setTimeout(animate, config.start + index * config.stagger);
|
|
});
|
|
|
|
window.setInterval(() => {
|
|
hero.classList.remove("is-glitching");
|
|
void hero.offsetWidth;
|
|
hero.classList.add("is-glitching");
|
|
}, config.glitch);
|
|
});
|
|
})();
|