Раскрывающиеся карточки TM101 в Tilda: эффект Dock и мобильная сетка

В портфолио или разделе команды хочется выделить фотографию под мышью, сохранив весь ряд перед глазами. Мод для TM101 расширяет активную карточку и меняет ширину соседних. Получается движение, похожее на Dock в macOS.

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

Добавьте стандартный TM101, заполните фотографии и подписи. Возьмите изображения с понятным главным объектом: при изменении ширины кадр будет восприниматься иначе, и важная часть фотографии не должна теряться.

Код обращается к структуре TM101 на странице. Отдельного выбора одного блока по ID в этом конструкторе нет. Если таких блоков несколько, заранее просмотрите каждый из них. Настройка, удачная для коротких подписей команды, может оказаться тесной для другого ряда с длинными названиями проектов.

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

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

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

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

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

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

Задайте ширину включения мобильного режима. В ленте карточки можно просматривать горизонтально; в сетке настройте число элементов в ряду и промежутки. При отключённой мобильной гармошке подписи отображаются без наведения.

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

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

• Раскрытый ряд помещается в контейнер.
• Главные объекты на снимках остаются видны.
• Длинные подписи читаются.
• Порог мобильного режима работает при изменении ширины.
• Все TM101 на странице выглядят ожидаемо.

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

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