Каталог / Коллаж из всплывающих фото вокруг заголовка
Коллаж из всплывающих фото вокруг заголовка
Вокруг заголовка разбросаны скруглённые карточки-фото: они по очереди всплывают, а затем мягко «дышат», слегка дрейфуя вверх-вниз. Свои фотографии подставляются через опции, по умолчанию — цветные градиентные заглушки.
Демо
Как устроено
Карточки лежат в абсолютном слое поверх сцены. Позиция каждой задаётся CSS-переменной на контейнере (translate, поворот, ширина), сами правила статичные — поэтому у дочерних элементов нет inline-стилей и строгий CSP не мешает. Появление — класс is-on с CSS-переходом прозрачности плюс лёгкий «подскок» содержимого через Web Animations API; «дыхание» — бесконечная знакопеременная анимация translateY с разной длительностью у каждой карточки. Заглушки — градиенты из токенов кита; свои изображения передаются массивом images в опциях mount и вставляются как img с object-fit:cover. Без DOM mount ничего не делает. При prefers-reduced-motion (или data-motion=off на html) всё сразу видно и ничего не дрейфует.
Параметры
| Название | Ключ | Тип | По умолчанию | Значения |
|---|---|---|---|---|
| Заголовок | title | string | "Ядро HR-процессов в одном месте" | до 120 символов |
| Подзаголовок | subtitle | string | "Команда, найм и развитие людей — в одной прозрачной системе." | до 200 символов |
| Число карточек | count | number | 8 | 2…8 |
| Ширина карточки | cardSize | number | 96 | 56…160 px |
| Радиус разброса | radius | number | 300 | 140…520 px |
| Амплитуда дрейфа | drift | number | 8 | 0…24 px |
| Шаг появления карточек | stagger | number | 140 | 0…600 мс |
| Задержка старта | startDelay | number | 200 | 0…3000 мс |
| Анимация | motion | select | "auto" | По настройке системы, Всегда включена, Без движения |
Код
Исходный код доступен в платной версии рецепта.