Живые карточки в Tilda: магнит, упругое увеличение и подъём с тенью

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

Мод «Живые карточки» двигает весь выбранный элемент. Сетка при этом не раздвигается автоматически. Разберём три режима, место для движения и проверку возврата карточки в исходное положение.

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

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

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

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

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

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

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

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

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

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

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

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

Если движение мешает быстро выбирать, ослабьте его или оставьте более простой подъём вместо сложной реакции.

Читайте также: Увеличение карточек при наведении в Tilda: как настроить аккуратно · Эффекты карточек в Tilda: как выбрать один из 13 вариантов GSAP.