feat(marquee): flicker animation — fade in/show/fade-out per tag, max 3 visible (scoped to grid)
This commit is contained in:
1 parent
d652a63dda
commit
10f94cc306
1 file changed
+35
@@ -5499,6 +5499,8 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
|
||||
.marquee-grid__cell {
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
opacity: 0;
|
||||
animation: tagFlicker var(--tag-cycle, 15s) ease-in-out infinite;
|
||||
}
|
||||
.marquee-grid__cell .hero__tag {
|
||||
display: inline;
|
||||
@@ -5514,6 +5516,39 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Flicker: каждый тег по очереди fade-in → show → fade-out.
|
||||
Цикл 15s, шаг 1s; окно видимости ~18% цикла → одновременно видимы ≤3 тега. */
|
||||
.marquee-grid__cell:nth-child(1) { animation-delay: -1s; }
|
||||
.marquee-grid__cell:nth-child(2) { animation-delay: -2s; }
|
||||
.marquee-grid__cell:nth-child(3) { animation-delay: -3s; }
|
||||
.marquee-grid__cell:nth-child(4) { animation-delay: -4s; }
|
||||
.marquee-grid__cell:nth-child(5) { animation-delay: -5s; }
|
||||
.marquee-grid__cell:nth-child(6) { animation-delay: -6s; }
|
||||
.marquee-grid__cell:nth-child(7) { animation-delay: -7s; }
|
||||
.marquee-grid__cell:nth-child(8) { animation-delay: -8s; }
|
||||
.marquee-grid__cell:nth-child(9) { animation-delay: -9s; }
|
||||
.marquee-grid__cell:nth-child(10) { animation-delay: -10s; }
|
||||
.marquee-grid__cell:nth-child(11) { animation-delay: -11s; }
|
||||
.marquee-grid__cell:nth-child(12) { animation-delay: -12s; }
|
||||
.marquee-grid__cell:nth-child(13) { animation-delay: -13s; }
|
||||
.marquee-grid__cell:nth-child(14) { animation-delay: -14s; }
|
||||
.marquee-grid__cell:nth-child(15) { animation-delay: -15s; }
|
||||
|
||||
@keyframes tagFlicker {
|
||||
0% { opacity: 0; }
|
||||
2% { opacity: 1; }
|
||||
16% { opacity: 1; }
|
||||
18% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee-grid__cell {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Marquee появляется мягче, чем обычные секции (без большого сдвига) */
|
||||
.marquee[data-reveal] {
|
||||
opacity: 0;
|
||||
|
||||
Reference in new issue
Block a user