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

feat: Add ambient animations for feature icons and update scroll-delay logic for card entrance

Browse Source
This commit is contained in:
Matt Batchelder
2026-03-22 01:45:38 -04:00
parent b14e137933
commit d120bec8ce
2 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
theme/assets/css/main.css
View File

@@ -129,6 +129,46 @@ a:hover { color: var(--color-primary); }
animation: icon-pop 0.4s ease-out backwards;
}
/* ── Ambient feature-icon animations ──────────────────────────
Continuous "alive" motion inside feature cards, inspired by
the design page platform-row visual animations. Combines a
gentle float with a sonar-pulse ring on the icon. */
@keyframes icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes icon-ring {
0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.35); }
60% { box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}
@keyframes icon-cog-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Float + ring on all feature icons (but only once the card has
scroll-revealed — the .is-animated class is set by demo-animator.js). */
.oribi-card.is-animated .feature-icon {
animation: icon-float 3.6s ease-in-out infinite,
icon-ring 3.6s ease-out infinite;
}
/* Pause ambient animation during hover so the scale transform
from .oribi-card:hover .feature-icon takes over cleanly. */
.oribi-card:hover .feature-icon {
animation: none;
}
/* Cog icons spin slowly — contextually appropriate regardless of card. */
.feature-icon .fa-cog,
.feature-icon .fa-users-cog {
animation: icon-cog-spin 8s linear infinite;
}
/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
.oribi-card.is-animated .feature-icon { animation: none; }
.feature-icon .fa-cog,
.feature-icon .fa-users-cog { animation: none; }
}
/* Smooth theme transition */
body,
.site-header,