Объёмная лента из GL03 в Tilda: перспектива, инерция и подписи

Фотографии можно собрать в горизонтальную ленту с глубиной: кадры меняют восприятие по мере движения, а посетитель листает подборку мышью или пальцем. Источником остаётся стандартный GL03.

Разберём настройку перспективы, инерции и подписей. У этого конструктора сейчас доступен горизонтальный формат; вертикальная лента отключена. Для одного источника нужен один код галереи, без наложения разных вариантов на тот же блок.

Добавьте стандартный GL03, загрузите изображения и заполните поле «Заголовок» у тех снимков, которым нужны подписи. Выберите блок-источник по ID или CSS-классу в настройках области применения.

Проверьте состав ещё до настройки движения. Если подходящий источник не найден в выбранной области, код может взять первый GL03 на странице. Поэтому важно сверить несколько узнаваемых фотографий, а не считать любое появившееся изображение успехом. На странице с несколькими альбомами явно укажите нужный, чтобы в ленту не попала соседняя подборка.

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

Сильная перспектива может выглядеть выразительно, но делать боковые кадры слишком узкими. Сначала добейтесь того, чтобы изображения можно было рассмотреть. Проверьте светлые и тёмные снимки, вертикальный портрет и широкий кадр. Мобильную настройку оценивайте отдельно: параметр, который подходит большому монитору, не обязательно оставит достаточно видимых фотографий на телефоне.

Подберите инерцию перетаскивания, плавность остановки и шаг свайпа. Проведите мышью медленно, затем быстро и отпустите. Лента должна двигаться предсказуемо, а не продолжать слишком долго уходить от кадра, который вы уже хотите рассмотреть.

На телефоне проверьте жест пальцем и возможность прокрутить саму страницу рядом с галереей. Не настраивайте весь эффект только по одному удачному движению в превью. Несколько коротких свайпов и смена направления лучше показывают, удобно ли посетителю остановиться на нужной работе и продолжить просмотр.

При необходимости включите автоматическое движение, выберите направление и длительность круга. Чем больше длительность, тем медленнее движется лента. Отдельно можно включить паузу при наведении.

Сначала проверьте ручное управление без постоянной смены. Если подборка требует внимания, не заставляйте посетителя догонять фотографии. На сенсорном экране привычной паузы от наведения нет, поэтому оцените весь сценарий отдельно. Автоматическое движение уместно, когда оно дополняет композицию, а не мешает читать подписи и выбирать кадр.

Подписи берутся из поля «Заголовок» каждого изображения GL03. Если поле пустое, для этого снимка надпись не выводится. В конструкторе задайте шрифт, цвет и фон подписи.

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

Добавьте код в T123 после GL03 и опубликуйте страницу. Не подключайте к этому же источнику другой мод галереи поверх уже настроенного.

• Показаны фотографии правильного GL03.
• Перспектива подходит компьютеру и телефону.
• Перетаскивание и свайп удобно останавливаются.
• Автопрокрутка идёт в выбранном темпе, а пауза работает там, где она включена.
• Подписи соответствуют заголовкам изображений.

Если нужен вертикальный вариант, не ищите его в текущей настройке: он сейчас недоступен. Выбирайте другой способ показа, подходящий вашей задаче.

Читайте также: 3D-карусель Coverflow в Tilda: центральное фото и объёмные края · Слайдер-стопка в Tilda: фотографии из GL03 одна за другой.