Каталог / Карточка, выезжающая из конверта
Карточка, выезжающая из конверта
Конверт открывает клапан, и из него поднимается карточка с отзывом или сообщением: аватар-заглушка, имя, текст и звёзды. Карточка встаёт над конвертом, нижний край остаётся в кармане.
Демо
Как устроено
Конверт собран из четырёх слоёв: задник, клапан-треугольник (clip-path), карточка и передний карман с вырезом. Клапан закрыт поворотом rotateX вокруг линии сгиба и открывается CSS-переходом; карточка едет вверх переходом transform с лёгким пружинным перелётом. Порядок слоёв по z-index: поднятая карточка стоит над открытым клапаном, а её нижний край прячется за передним карманом. Все состояния — классы is-on/is-open/is-up, тайминги — CSS-переменные на контейнере, поэтому inline-стилей нет и строгий CSP не мешает. Мягкое появление сцены — Web Animations API. Без DOM mount ничего не делает. При prefers-reduced-motion (или data-motion=off на html) сразу показан конверт с поднятой карточкой.
Параметры
| Название | Ключ | Тип | По умолчанию | Значения |
|---|---|---|---|---|
| Цвет конверта | envColor | color | "var(--zg-brand)" | |
| Заголовок карточки | cardTitle | string | "Алия Каримова" | до 60 символов |
| Текст карточки | cardText | string | "Директор по персоналу · «Система навела порядок в найме и адаптации, команда тратит меньше времени на рутину»." | до 220 символов |
| Показывать аватар-заглушку | showAvatar | boolean | true | |
| Показывать звёзды | showStars | boolean | true | |
| Пауза перед открытием клапана | openDelay | number | 500 | 0…3000 мс |
| Длительность открытия клапана | openDuration | number | 650 | 150…2000 мс |
| Длительность подъёма карточки | riseDuration | number | 750 | 200…2500 мс |
| Задержка старта | startDelay | number | 200 | 0…3000 мс |
| Анимация | motion | select | "auto" | По настройке системы, Всегда включена, Без движения |
Код
Исходный код доступен в платной версии рецепта.