26 lines
1.1 KiB
JavaScript
26 lines
1.1 KiB
JavaScript
/* Keep decorative equipment traffic paused when off screen or reduced motion is requested. */
|
|
(() => {
|
|
const scenes = [...document.querySelectorAll('.motion-overlay')];
|
|
if (!scenes.length) return;
|
|
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
const update = (svg, visible) => {
|
|
svg.dataset.visible = visible ? '1' : '0';
|
|
const active = visible && !reduced.matches;
|
|
svg.parentElement.classList.toggle('is-active', active);
|
|
if (active) svg.unpauseAnimations();
|
|
else svg.pauseAnimations();
|
|
};
|
|
scenes.forEach(svg => update(svg, false));
|
|
if ('IntersectionObserver' in window) {
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => update(entry.target, entry.isIntersecting));
|
|
}, {rootMargin: '80px 0px', threshold: 0.01});
|
|
scenes.forEach(svg => observer.observe(svg));
|
|
} else {
|
|
scenes.forEach(svg => update(svg, true));
|
|
}
|
|
const refresh = () => scenes.forEach(svg => update(svg, svg.dataset.visible === '1'));
|
|
if (reduced.addEventListener) reduced.addEventListener('change', refresh);
|
|
else reduced.addListener(refresh);
|
|
})();
|