Каталог / Веер карточек с активной картой
Веер карточек с активной картой
Карточки с иконками раскрываются из колоды в веер, как карты в руке. Активная карта приподнимается, подсвечивается акцентной рамкой, под ней появляется подпись.
Демо
Как устроено
Конечное положение каждой карты (сдвиг, наклон, масштаб) считается в JS и кладётся CSS-переменной на контейнер; статичные правила по номеру карты читают эти переменные, поэтому у дочерних элементов нет inline-стилей и строгий CSP не мешает. Раскрытие — Web Animations API: каждая карта едет из сложенной колоды в своё место с лёгким пружинным перелётом, появление — класс is-on с CSS-переходом прозрачности. Иконки — встроенные SVG-глифы с цветами из токенов кита. Без DOM mount ничего не делает. При prefers-reduced-motion (или data-motion=off на html) веер сразу показан раскрытым.
Параметры
| Название | Ключ | Тип | По умолчанию | Значения |
|---|---|---|---|---|
| Число карт | count | number | 5 | 3…9 |
| Угол веера | spread | number | 56 | 10…120 ° |
| Ширина карты | cardSize | number | 118 | 72…200 px |
| Номер активной карты | active | number | 3 | 1…9 |
| Подпись | caption | string | "Видеовстречи" | до 60 символов |
| Пояснение под подписью | note | string | "Подключение в один клик" | до 90 символов |
| Длительность раскрытия | openDuration | number | 700 | 200…2000 мс |
| Задержка старта | startDelay | number | 200 | 0…3000 мс |
| Цвет подсветки активной карты | accentColor | color | "var(--zg-brand)" | |
| Анимация | motion | select | "auto" | По настройке системы, Всегда включена, Без движения |
Код
Исходный код доступен в платной версии рецепта.