Перейти к содержимому
ИЗБРАННОЕ 0 Забрать бесплатно
Модификации выключены. Так эта страница выглядит на обычной Тильде.

Переворачивающаяся карточка

MOD-190 СКРОЛЛ И АНИМАЦИИ v1.0 ГОТОВ ✓ ПРОВЕРЕНО 12.08.26
Сообщить о проблеме

Связывает лицевую и обратную стороны с управлением мышью, касанием и клавиатурой.

ТИЛЬДА УМЕЕТ ЭТО САМА

Даёт обычные hover- и пошаговые анимации Zero Block, но не содержит готовой 3D-механики переворота.

Где это у неё: Ноль rotateY, rotateX, perspective и flip-механики в 53 JS-файлах снятого рантайма; замер 29.07.26.

Чего в родной версии нет: Связи двух сторон, управления состоянием и доступного touch/keyboard-сценария нет.

ГОТОВ · ТЕХНИЧЕСКИЙ КОНТРАКТ

Как устроен мод

ГОТОВ И ПРОВЕРЕН

РЕЗУЛЬТАТ

Связывает лицевую и обратную стороны с управлением мышью, касанием и клавиатурой.

КАК ВСТРАИВАЕТСЯ

Готовый файл подключается через блок T123 рядом с карточками. Секции назначается класс mk-flip-card. Настройки передаются в MK_MOD_190; генератор ниже собирает их без ручной правки JavaScript.

ГРАНИЦЫ БЕЗОПАСНОСТИ

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

КРИТЕРИИ ГОТОВНОСТИ

  • Сборка 1.0 загружается без ошибок и выполняет минимальный пользовательский сценарий на сохранённой странице Тильды; проверено 12.08.26.
  • Повторная инициализация не создаёт второй экземпляр интерфейса и не ломает соседние стандартные блоки.
  • Параметры генератора совпадают с meta.json и попадают в код с правильными типами.

ЖИВОЕ ДЕМО · РАБОТАЕТ ФАЙЛ v1.0

Это изолированный стенд с тем же закреплённым файлом, который копируется в T123. Внешний вид стенда условный — мод меняет только поведение размеченных элементов.

ПАРАМЕТРЫ

ЕСТЬ ЕЩЁ, ВНУТРИ ФАЙЛА
front [data-mk-flip-front]
Лицевая сторона
back [data-mk-flip-back]
Обратная сторона
trigger [data-mk-flip-toggle]
Кнопка переворота
КУДА ВСТАВЛЯТЬ: блок T123 рядом с карточками 
<script src="https://modkod.ru/mk/v1.0/mod-190.js" defer></script>
<script>
  window.MK_MOD_190 = {
    hover: true,
  };
</script>
6.9 КБ ПО СЕТИ · БЕЗ ВНЕШНИХ БИБЛИОТЕК · v1.0 Открыть mod-190.js целиком →
НЕ ХОТИТЕ ЗАВИСЕТЬ ОТ НАШЕГО ДОМЕНА Тот же мод одним куском, 18.4 КБ в блок T123 →
УСТАНОВКА БЕЗ ПРАВКИ JAVASCRIPT

Пять шагов до готовой страницы

v1.0 ЗАКРЕПЛЕНА
  1. 01 Подготовьте секцию Откройте настройки нужной секции Zero Block и впишите mk-flip-card в поле «CSS class name».
  2. 02 Добавьте блок T123 блок T123 рядом с карточками. Один блок с кодом ставьте один раз на страницу.
  3. 03 Скопируйте готовую вставку Код ниже подключает закреплённую версию 1.0; её поведение не изменится само после сдачи сайта.
  4. 04 Опубликуйте страницу Проверяйте опубликованный адрес, а не только предпросмотр редактора Тильды.
  5. 05 Пройдите приёмку Сборка 1.0 загружается без ошибок и выполняет минимальный пользовательский сценарий на сохранённой странице Тильды; проверено 12.08.26.

Про этот мод написано

2 разбора
12 августа 2026 1 МИН

Что нельзя сделать в Zero Block без кода

MOD-108MOD-184MOD-185 +1
12 августа 2026 1 МИН

Переворачивающиеся карточки в Тильде

MOD-190

Похожие задачи

3 мода
ГОТОВ
MOD-055 · Скролл и анимации

Поэкранный скролл

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

ST100 · ZERO ✓ 12.08.26
ГОТОВ
MOD-146 · Скролл и анимации

Зависимая анимация по наведению

Наводишь на пункт списка — рядом остаётся только его картинка. Пары связываются классами.

ZERO ✓ 28.07.26
ГОТОВ
MOD-127 · Скролл и анимации

Параллакс для обложки

Мягко смещает фон обычной обложки; анимацию Zero Block не перехватывает.

ZERO ✓ 12.08.26