Схватите бейдж мышью и бросьте — так он ведёт себя на сайте
Карточка
По ссылке — картинки .jpg, .png, .webp и видео .mp4, .webm. Нужна прямая ссылка на файл, отдаваемый с разрешением CORS (например, из облачного хранилища или CDN); ссылки на страницы YouTube/VK не подойдут. Видео играет без звука по кругу. Стрелка справа загружает картинку с компьютера.
Высота — по пропорциям картинки. Каждая картинка — отдельный бейдж.
Вторая карточка
По ссылке — картинки .jpg, .png, .webp и видео .mp4, .webm. Нужна прямая ссылка на файл, отдаваемый с разрешением CORS (например, из облачного хранилища или CDN); ссылки на страницы YouTube/VK не подойдут. Видео играет без звука по кругу. Стрелка справа загружает картинку с компьютера.
Клик по бейджу — задняя (левая) карточка выезжает вперёд, передняя уходит назад.
Вторая карточка висит на том же карабине позади первой, развёрнутая веером. Первая картинка — ко первому бейджу, вторая — ко второму.
Лента
Лента плавно переходит в него к карабину.
Карабин, полукольцо и люверс.
Видна, если лента широкая — от 20 px.
Физика
Больше — дольше качается и сильнее поворачивается.
Блок
В коде вставки блок занимает всю высоту контейнера (100 %) — например, элемента в Zero Block. Это число — запасная высота: она сработает, если у контейнера своей высоты нет (обычный блок T123).