added reveal animation to all pages.

This commit is contained in:
vargha1
2026-09-22 09:42:25 +03:30
parent de38302be3
commit e4d2afc2fa
2 changed files with 71 additions and 0 deletions

View File

@@ -4118,3 +4118,42 @@ or: var(--c-teal);
.acc__q[aria-expanded="false"] + .acc__a p { .acc__q[aria-expanded="false"] + .acc__a p {
padding-top: 0; padding-top: 0;
} }
/* =========================================================
Scroll reveal
each top-level section fades and rises into place the first
time it crosses into view; its cards cascade in right after
========================================================= */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(2.5rem);
transition:
opacity 0.7s var(--ease),
transform 0.7s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.reveal-item {
opacity: 0;
}
.reveal-item.is-visible {
animation: card-rise 0.6s var(--ease) both;
}
@keyframes card-rise {
from {
opacity: 0;
transform: translateY(1.5rem);
}
to {
opacity: 1;
transform: none;
}
}
}

View File

@@ -539,4 +539,36 @@
ticketForm.reset(); ticketForm.reset();
}); });
} }
/* ---------- scroll reveal: sections fade/rise in, cards cascade after ---------- */
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reduceMotion && 'IntersectionObserver' in window) {
var revealSections = Array.prototype.slice.call(document.querySelectorAll('#main > section'));
var cardSelector = '.dcard, .acard, .titem, .rcard, .quote, .statcard';
var groupCounts = new Map();
revealSections.forEach(function (section) {
section.classList.add('reveal');
Array.prototype.forEach.call(section.querySelectorAll(cardSelector), function (card) {
var group = card.parentElement;
var i = groupCounts.get(group) || 0;
groupCounts.set(group, i + 1);
card.classList.add('reveal-item');
card.style.animationDelay = (Math.min(i, 7) * 0.07) + 's';
});
});
var revealObserver = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.classList.add('is-visible');
Array.prototype.forEach.call(entry.target.querySelectorAll('.reveal-item'), function (item) {
item.classList.add('is-visible');
});
obs.unobserve(entry.target);
});
}, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
revealSections.forEach(function (section) { revealObserver.observe(section); });
}
})(); })();