Перейти к содержимому

CoreMarquee

Примеры использования и документация.

Бесконечная бегущая строка для длинного контента, которому не хватает ширины экрана: логотипы партнёров, тикеры, теги. Пользователь видит весь список без скролла и прокрутки, наведение ставит анимацию на паузу, чтобы прочитать или кликнуть элемент.

Технические детали: скорость задаётся секундами на цикл (duration), reverse меняет направление справа налево → слева направо, pauseOnHover (по умолчанию true) — пауза при наведении. Контент дублируется второй группой для бесшовного цикла; дубликат скрыт от ассистивных технологий (aria-hidden + inert). С ariaLabel корневой элемент получает role="region" с aria-label. flowRandom интервалом (1.4 c) подсвечивает случайный видимый текст-элемент, одновременно переливаются не больше трёх; каждому назначается один из 7 вариантов градиента (варианты --v1…--v7: пары цветов темы, угол 45–120°, скорость 6–13 с, у --v2/--v6 обратное направление); перелив вешается синхронно на обе копии контента и снимается, лишь когда обе ушли из кадра, — на стыке бесшовного цикла (translateX −50% → 0) сменяется видимая копия, и перелив с вариантом не обрываются; появление градиента — плавный фейд 0.6 с (зарегистрированное @property --core-marquee-flow-fade + color-mix, без @property — мгновенный скачок); собственные заливка и рамка элемента сохраняются — переливается только надпись (двухслойный background-clip: градиент по тексту + собственная заливка по padding-box, специфичность гарантирует :deep-правило); при prefers-reduced-motion подсветка не включается. При prefers-reduced-motion анимация отключается, контент остаётся доступным обычной прокруткой.

Копии контента считаются автоматически: минимум две (бесшовный цикл), а если одна группа уже ленты — ровно столько, чтобы покрыть контейнер с запасом в одну группу (замер после монтирования и на resize). Сдвиг цикла — всегда одна группа (-100%/N), стык бесшовный при любой ширине экрана.

Доступность

  • SC 2.2.2 (Pause, Stop, Hide): механизм паузы — остановка при наведении (pause-on-hover, включена по умолчанию) и полная остановка анимации при prefers-reduced-motion и scripting: none (контент доступен прокруткой). Отдельной кнопки паузы нет.
  • prefers-reduced-motion: анимации нет, контент доступен прокруткой. Без JS (scripting: none) прокрутка также останавливается — движением нельзя управлять, поэтому его нет.
  • Дубли контента (все копии, кроме первой) — aria-hidden + inert: невидимы для скринридеров и не участвуют в таб-навигации.
  • aria-label даёт строке роль region (ориентир на странице).
  • flowRandom-переливы синхронны на копиях контента и отключены при reduced motion.
Nuxt 4Vue 3.5TypeScriptUnoCSSmotion-vvaul-vuedriver.jsVueUse
Nuxt 4Vue 3.5TypeScriptUnoCSSmotion-vvaul-vuedriver.jsVueUse
Nuxt 4Vue 3.5TypeScriptUnoCSSmotion-vvaul-vuedriver.jsVueUse

Кнопка в правом углу каждой строки останавливает и запускает прокрутку — требование WCAG 2.2.2 (движение дольше 5 с должно управляться); при prefers-reduced-motion анимации нет вовсе. Наведение курсора тоже ставит паузу. Третья строка — flow-random: случайные чипы плавно вспыхивают одним из 7 разных переливов и не обрываются на стыке цикла.