OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Update CSS will-change property and add min-height to hero section; enhance JS card animation with reduced motion support

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:22:07 -05:00
parent ebb4b7668c
commit d8c12e3f3b
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
theme/assets/js/main.js
View File

@@ -119,7 +119,8 @@ document.addEventListener('DOMContentLoaded', () => {
/* ── Animate cards on scroll ────────────────────────────── */
const cards = document.querySelectorAll('.oribi-card, .feature-card, .industry-card, .pricing-card, .value-card, .platform-row');
if (cards.length && 'IntersectionObserver' in window) {
if (cards.length && 'IntersectionObserver' in window &&
!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
cards.forEach(c => { c.style.opacity = '0'; c.style.transform = 'translateY(24px)'; c.style.transition = 'opacity .5s ease, transform .5s ease'; });
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
@@ -129,7 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
io.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
}, { threshold: 0.1, rootMargin: '0px 0px 60px 0px' });
cards.forEach(c => io.observe(c));
}
});