NLM185 • Время настройки: 5 минут
3D карточки с анимацией при наведении в Zero Block на Тильде
Эта модификация создает интерактивные карточки с эффектом переворота при наведении или нажатии.
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Сеть бутиков — Salon de THÉ
Интернет-магазин космецевтики
Интернет-магазин Beautix
Интернет-магазин одежды AMO
Интернет-магазин SmolDex
Интернет-магазин B2B по заказу IT-оборудования
Кейсы студентов
Инструкция
Шаг 1.
Создай первую группу элементов, которая будет представлять лицевую сторону карточки. В этой группе добавьте необходимые элементы, такие как изображение, текст или кнопку. Присвойте этой группе класс, например, "front". Внимание! Задайте группе настройку «Object».
Чтобы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class
Шаг 2.
Создай вторую группу элементов для обратной стороны карточки. В этой группе также разместите нужные элементы, например, изображение, текст или другие элементы. Присвойте этой группе класс, например, "back". Внимание! Задайте группе настройку «Object».
Шаг 3.
Размести обе группы на нужной позиции в блоке, где хочешь видеть карточку на опубликованной странице. Наложи лицевую и обратную сторону друг на друга.
Шаг 4.
Если хочешь сделать ещё одну карточку — просто копируй существующую и поменяй классы.
Шаг 5.
Заполни поля генератора классами карточек, и не забудь указать скорость анимации в ms. Например: 3000.
Шаг 6.
Когда всё готово — копируешь HTML-код и вставляешь его в блок Т123.
Важно!
Создай первую группу элементов, которая будет представлять лицевую сторону карточки. В этой группе добавьте необходимые элементы, такие как изображение, текст или кнопку. Присвойте этой группе класс, например, "front". Внимание! Задайте группе настройку «Object».
Чтобы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class
Шаг 2.
Создай вторую группу элементов для обратной стороны карточки. В этой группе также разместите нужные элементы, например, изображение, текст или другие элементы. Присвойте этой группе класс, например, "back". Внимание! Задайте группе настройку «Object».
Шаг 3.
Размести обе группы на нужной позиции в блоке, где хочешь видеть карточку на опубликованной странице. Наложи лицевую и обратную сторону друг на друга.
Шаг 4.
Если хочешь сделать ещё одну карточку — просто копируй существующую и поменяй классы.
Шаг 5.
Заполни поля генератора классами карточек, и не забудь указать скорость анимации в ms. Например: 3000.
Шаг 6.
Когда всё готово — копируешь HTML-код и вставляешь его в блок Т123.
Важно!
- Не указывайте класс для каждого элемента группы, достаточно задать класс только самой группе.
- Не добавляйте дополнительную анимацию для карточек — ни базовую, ни пошаговую.
- Не ставьте настройку rotate. Сделайте настройку полупрозрачной: удалите значение, нажмите Enter — должно остаться значение 0 и полупрозрачность.
- В слоях лицевая сторона карточки должна быть выше обратной стороны.
- Внутри группы на обратной стороне карточки не должно быть подгрупп. Если сгруппировать элементы внутри группы, при перевороте карточки они могут не отобразиться.
- Также не включайте настройку Auto Layout для групп на обратной стороне карточки — это может привести к тому, что элементы не отобразятся при перевороте.
- По умолчанию z-index карточек = 1111111. Если карточки налезают на другие элементы (например, на шапку сайта), поменяйте z-index с помощью модификации NLM102. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой.
Смотрите, как быстро установить модификацию
Сгенерируйте код для своего сайта
Код готов и доступен по подписке Нолим
Уже есть подписка? Войти
Добавляйте на сайт слайдеры, аккордеоны, вкладки и скроллы — 200+ готовых решений в одной подписке
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Анимация карточек Тильда — 3D-переворот, который запоминают
Стандартная сетка карточек на Тильде выглядит хорошо. Но когда каждый конкурент делает такую же сетку — тебе нужен визуальный ход, который выделяет. Анимация карточек Тильда с 3D-переворотом — это именно такой ход.
Модификация NLM185 от Nolim помогает сделать интерактивную карточку в Zero Block: лицевая сторона показывает основную информацию, а обратная открывается при наведении или клике. Так можно спрятать детали, не увеличивая длину страницы.
Модификация NLM185 от Nolim помогает сделать интерактивную карточку в Zero Block: лицевая сторона показывает основную информацию, а обратная открывается при наведении или клике. Так можно спрятать детали, не увеличивая длину страницы.
Анимация карточек Тильда — 3D-переворот, который запоминают
Стандартная сетка карточек на Тильде выглядит хорошо. Но когда каждый конкурент делает такую же сетку — тебе нужен визуальный ход, который выделяет. Анимация карточек Тильда с 3D-переворотом — это именно такой ход.
Модификация NLM185 от Nolim помогает сделать интерактивную карточку в Zero Block: лицевая сторона показывает основную информацию, а обратная открывается при наведении или клике. Так можно спрятать детали, не увеличивая длину страницы.
Модификация NLM185 от Nolim помогает сделать интерактивную карточку в Zero Block: лицевая сторона показывает основную информацию, а обратная открывается при наведении или клике. Так можно спрятать детали, не увеличивая длину страницы.
Как установить за 5 минут
Собери в Zero Block две группы элементов: лицевую сторону карточки и обратную. На лицевой стороне можно разместить изображение, заголовок и короткое описание. На обратной — подробности, кнопку, цену, ссылку или дополнительный текст.
Задай каждой группе CSS-класс, например `front` и `back`, наложи их друг на друга в одном месте и укажи эти классы в генераторе Nolim. После настройки скорости переворота скопируй код, вставь его в блок T123 и опубликуй страницу.
Задай каждой группе CSS-класс, например `front` и `back`, наложи их друг на друга в одном месте и укажи эти классы в генераторе Nolim. После настройки скорости переворота скопируй код, вставь его в блок T123 и опубликуй страницу.
Где использовать 3D-карточки
3D-переворот хорошо работает в портфолио, карточках услуг, блоках команды, тарифах, кейсах, подборках товаров и обучающих проектах. Пользователь видит аккуратную сетку, а дополнительные детали открывает только тогда, когда взаимодействует с карточкой.
Например, на лицевой стороне можно показать название услуги и изображение, а на обратной — краткое описание, стоимость и кнопку «Подробнее». Для портфолио лицевая сторона может показывать результат, а обратная — задачу, решение и ссылку на кейс.
Например, на лицевой стороне можно показать название услуги и изображение, а на обратной — краткое описание, стоимость и кнопку «Подробнее». Для портфолио лицевая сторона может показывать результат, а обратная — задачу, решение и ссылку на кейс.
Почему это лучше обычной карточки
Обычная карточка сразу показывает весь контент. Если информации много, блок становится тяжёлым: длинные описания, кнопки, подписи и детали перегружают сетку. 3D-карточка решает эту проблему: основной экран остаётся чистым, а подробности появляются по действию пользователя.
Такой эффект не просто украшает страницу, а помогает организовать контент. Визуально карточки выглядят легче, но при этом внутри каждой можно оставить больше полезной информации.
Такой эффект не просто украшает страницу, а помогает организовать контент. Визуально карточки выглядят легче, но при этом внутри каждой можно оставить больше полезной информации.
Что важно учесть при настройке
Классы нужно задавать именно группам лицевой и обратной стороны, а не каждому элементу внутри карточки. Обе группы должны быть настроены как Object и лежать друг над другом. Лицевая сторона должна находиться выше обратной в слоях.
Не добавляй к карточкам отдельную базовую или пошаговую анимацию — она может конфликтовать с переворотом. На обратной стороне лучше не использовать вложенные группы и Auto Layout, иначе часть элементов может не отображаться после поворота.
Не добавляй к карточкам отдельную базовую или пошаговую анимацию — она может конфликтовать с переворотом. На обратной стороне лучше не использовать вложенные группы и Auto Layout, иначе часть элементов может не отображаться после поворота.
Что проверить после публикации
Проверь карточки на десктопе и мобильной версии. На компьютере удобно использовать переворот при наведении, а на телефоне лучше работает клик: там нет курсора, поэтому hover-сценарий не сработает.
Отдельно проверь z-index. Если карточки перекрывают шапку, попапы или соседние блоки, нужно скорректировать слои. Хорошая 3D-анимация должна выделять карточку, но не ломать интерфейс и не мешать пользователю нажимать на кнопки.
Отдельно проверь z-index. Если карточки перекрывают шапку, попапы или соседние блоки, нужно скорректировать слои. Хорошая 3D-анимация должна выделять карточку, но не ломать интерфейс и не мешать пользователю нажимать на кнопки.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Создай в Zero Block две стороны карточки — лицевую и обратную. В генераторе на nolim.cc/3d-card-hover-effect укажи ID обеих сторон и задай триггер (наведение или клик). Скопируй код и вставь в блок «HTML-блок». При наведении курсора карточка плавно переворачивается и показывает обратную сторону.
На мобильных устройствах триггер «наведение» не работает — нет курсора. Для мобильных устройств используй триггер «клик»: при нажатии карточка переворачивается. В генераторе Nolim ты можешь задать разные триггеры для десктопа и мобиле.
На обратной стороне — любой контент Zero Block: текст описания, кнопку «Подробнее», ссылку, цену, иконки соцсетей. Это полноценный Zero Block с произвольным дизайном. Именно поэтому анимация карточек Тильды через Nolim мощнее стандартных CSS-переворотов.
Было: дизайнер показывал работы стандартной сеткой — все проекты выглядели одинаково, подробности нужно было искать отдельно.
Стало: каждая карточка портфолио стала 3D — лицевая сторона показывает финальный результат, обратная сторона при наведении раскрывает кейс: задача, решение, результат. Время на странице портфолио выросло вдвое.
Стало: каждая карточка портфолио стала 3D — лицевая сторона показывает финальный результат, обратная сторона при наведении раскрывает кейс: задача, решение, результат. Время на странице портфолио выросло вдвое.