Множество

Показывать и настраивать
▼

У исходной и второй фигуры свои форма, количество, размер и скругление карточки, промежуток, хаос, повороты, деформации, а ещё камера, сдвиг, туман и фон — они плавно переходят по ходу превращения — правка одной не меняет другую. В режиме «Анимация» поля правят исходную. На сайт не влияет.

Промежуток
Обтекаемость

Карточки выгибаются по поверхности сферы, а не лежат на ней плоскими плитками.

Хаотичное расположение

Картинки ложатся на карточки вперемешку, а не по порядку. Сами карточки стоят ровными рядами.

Размер фигуры
px

Ребро куба, диаметр шара, ширина основания пирамиды. Карточки встают ровной сеткой с одинаковым промежутком — сколько поместится. На шаре — ровные ряды и по карточке на каждом полюсе. При преобразовании фигуры сохраняют свой размер: если второй нужно больше карточек, недостающие проявляются по ходу, если меньше — лишние растворяются.

Карточка

Размер
Радиус скругления
Угол поворота
Простая деформация

Галерея

Угол поворота
Простая деформация

Деформирует всю замкнутую кривую вместе с карточками.

Туман
%
Высота блока
px

В коде вставки блок занимает всю высоту контейнера (100 %) — например, элемента в Zero Block. Это число — запасная высота: она сработает, если у контейнера своей высоты нет (обычный блок T123).

Наклон камеры
°
Приближение
%
Сдвиг галереи

Положение галереи внутри блока, в % от его ширины и высоты: можно увести её вбок, чтобы рядом встал текст. Отрицательные значения — влево и вниз. В редакторе видно в режиме «Как на сайте».

Цвет фона

В этот же цвет уходит туман.

Прозрачный фон

По ссылке — картинки .jpg, .png, .webp и видео .mp4, .webm. Нужна прямая ссылка на файл, отдаваемый с разрешением CORS (например, из облачного хранилища или CDN); ссылки на страницы YouTube/VK не подойдут. Видео играет без звука по кругу. Стрелка справа загружает картинку с компьютера.

Взаимодействие

Пролистывание
Наведение на карточку
Клик по карточке
▼

«В центр экрана» — картинка плавно вылетает из галереи в центр, под ней — название и кнопка. «По ссылке» — переход по клику: сразу открывается ссылка, заданная у картинки.

Размер в центре
% экрана
Длительность
сек

Кнопка

Текст кнопки

По умолчанию — у картинки можно задать свой.

Шрифт
▼
Размер
px
Трекинг
em
Цвет текста
Цвет фона
Скругление
px

Анимация

Зацикленность бегущей строки
Длительность круга
сек
В обратную сторону
При появлении
Длительность
сек
Непрозрачность
%
Размер
%
Угол поворота
По скроллу
Преобразование в другую фигуру

Карточки перелетают со своих мест на места второй фигуры и обратно. Вид второй фигуры — вверху панели: «Показывать и настраивать» → «Вторую фигуру». Второй может быть и бесконечная галерея: фигура разлетается в туннель, а камера влетает внутрь.

Когда
▼

«По клику» — клик мимо карточек (или по ним, если у клика по карточке нет своего действия) переключает фигуру.

Расстояние
px

Сколько прокрутки длится превращение. Отсчёт — как у распада; сам распад начнётся, когда превращение закончится.

Волна
%

0 — все карточки летят разом, больше — по очереди.

Открыть код по подписке