added reveal animation to all pages.
This commit is contained in:
@@ -4118,3 +4118,42 @@ or: var(--c-teal);
|
||||
.acc__q[aria-expanded="false"] + .acc__a p {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -539,4 +539,36 @@
|
||||
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); });
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user