3D-карточки в Tilda: наклон за курсором и переворот

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

Разберём два режима мода «3D-наклон и переворот». Для начала лучше выбрать один и применить его к небольшой группе карточек.

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

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

В «Где применять» выберите блок по ID или общему классу, затем сами карточки. Это особенно важно в магазине: без ограничения селектор .js-product может охватить товары на всей странице.

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

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

Посмотрите эффект на тёмном и светлом изображении. Яркий блик может скрыть мелкую подпись. Не оценивайте оформление только на пустой демонстрационной карточке — длинное название товара и две цены сразу показывают, насколько движение уместно.

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

У одного набора настроек текст оборота общий. Мод не сочиняет и не подставляет отдельное описание каждого товара автоматически. Не переносите на оборот единственную важную характеристику: на устройстве без наведения человек может её не увидеть.

1. Выберите ограниченную область и карточки.
2. Настройте один эффект: наклон или переворот.
3. Определите, нужен ли режим «Только на десктопе (мышь)».
4. Добавьте код в T123 после блоков и опубликуйте страницу.
5. Проверьте ссылки, кнопки покупки и возврат карточки в обычное положение.

Если товары подгружаются или меняются после фильтра, повторите проверку на новых карточках. Одного удачного движения на первой плитке недостаточно.

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

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

Читайте также: Кастомный курсор в Tilda: эффект и подсказки над ссылками · Появление элементов при скролле в Tilda: как настроить по очереди.