Бесконечная галерея в Tilda: полотно с фото и перетаскиванием

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

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

Добавьте фотографии в GL03 и выберите нужный источник в «Где применять». Начните с одной галереи, состав которой легко проверить. Снимки будут повторяться, поэтому небольшая подборка покажет знакомые изображения довольно быстро.

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

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

Для вставки в шейп Zero Block укажите класс принимающего элемента и задайте его размеры в Tilda. Если область применения ограничена блоками, включите в неё и источник, и Zero с этой фигурой. Один элемент определяет, откуда брать фото, другой — где их показывать. Проверьте обе части настройки.

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

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

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

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

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

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

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

• Используются фотографии нужного GL03.
• Повторы воспринимаются как часть композиции.
• Автодвижение отключается значением 0, если оно не нужно.
• На телефоне фото остаются различимыми.
• Можно спокойно продолжить прокрутку за пределами полотна.

Для просмотра деталей работ оставьте понятный отдельный путь, если он нужен вашему портфолио.

Читайте также: Галерея как в Pinterest на Tilda: сетка и увеличение фото · 3D-карусель Coverflow в Tilda: центральное фото и объёмные края.