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

MOD-146 СКРОЛЛ И АНИМАЦИИ v1.0 ГОТОВ ✓ ПРОВЕРЕНО 28.07.26 БЕСПЛАТНО

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

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

Связывает наведение на один элемент с пошаговой анимацией другого элемента.

Где это у неё: data-animate-sbs-event="hover" и data-animate-sbs-trgels в tilda-animation-sbs-1.0.min.js; пары настраиваются поэлементно в редакторе Zero Block.

Чего в родной версии нет: Мод связывает до двенадцати пар одной нумерацией классов mk-item-N ↔ mk-pic-N, добавляет работу с клавиатурой и касанием и не требует вручную собирать пошаговую анимацию для каждой пары. Возможность Тильды здесь не скрыта: преимущество мода — повторяемая настройка списка.

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

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

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

РЕЗУЛЬТАТ

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

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

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

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

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

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

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

ПАРАМЕТРЫ

Длительность перехода 320 ms

80 800

Сдвиг картинки 38 px

0 120

Откуда выезжает картинка

Какая картинка видна сразу 1

1 12

Номер пары. Пока мышь не тронула список, стоит она.

Возвращать первую, когда мышь ушла

Выключено — остаётся та картинка, на которой мышь ушла из списка.

ЕСТЬ ЕЩЁ, ВНУТРИ ФАЙЛА

item mk-item: Пункты нумеруются: mk-item-1, mk-item-2. Номер связывает пункт с картинкой.
pic mk-pic: Картинки нумеруются так же: mk-pic-1, mk-pic-2.

КУДА ВСТАВЛЯТЬ: блок T123 на той же странице, где Zero Block со списком и картинками

<script src="https://modkod.ru/mk/v1.0/mod-146.js" defer></script>
<script>
  window.MK_MOD_146 = {
    duration: 320,
    shift: 38,
    from: 'right',
    start: 1,
    back: false,
  };
</script>

                mk-hover

/* Настройки блока → CSS класс.
   Один класс на секцию — элементы
   внутри мод найдёт сам. */

11.0 КБ ПО СЕТИ · БЕЗ ВНЕШНИХ БИБЛИОТЕК · v1.0 Открыть mod-146.js целиком →

НЕ ХОТИТЕ ЗАВИСЕТЬ ОТ НАШЕГО ДОМЕНА Тот же мод одним куском, 33.6 КБ в блок T123 →

УСТАНОВКА БЕЗ ПРАВКИ JAVASCRIPT

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

v1.0 ЗАКРЕПЛЕНА

01 Подготовьте секцию Откройте настройки нужной секции Zero Block и впишите mk-hover в поле «CSS class name».
02 Добавьте блок T123 блок T123 на той же странице, где Zero Block со списком и картинками. Один блок с кодом ставьте один раз на страницу.
03 Скопируйте готовую вставку Код ниже подключает закреплённую версию 1.0; её поведение не изменится само после сдачи сайта.
04 Опубликуйте страницу Проверяйте опубликованный адрес, а не только предпросмотр редактора Тильды.
05 Пройдите приёмку Сборка 1.0 загружается без ошибок и выполняет минимальный пользовательский сценарий на сохранённой странице Тильды; проверено 28.07.26.

ЕСЛИ НЕ ЗАРАБОТАЛО — ПРОВЕРЬ ПО ПОРЯДКУ

Причины, общие для любого кода на Тильде — страница не опубликована, кеш, блок и секция на разных страницах, — разобраны отдельно: куда вставлять код на Тильде .

0 ИЗ 5 · ПОСЛЕ ЭТОГО ПИШИ В ЧАТ Спросить в чате →

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

2 разбора

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

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

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

РЕЗУЛЬТАТ

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

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

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

ПАРАМЕТРЫ

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

ЕСЛИ НЕ ЗАРАБОТАЛО — ПРОВЕРЬ ПО ПОРЯДКУ

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

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

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

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

Липкий горизонтальный скролл

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

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

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

РЕЗУЛЬТАТ

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

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

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

ПАРАМЕТРЫ

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

ЕСЛИ НЕ ЗАРАБОТАЛО — ПРОВЕРЬ ПО ПОРЯДКУ

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

Доработка сайта на Тильде: десять задач

Картинка при наведении на пункт: пределы Тильды

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

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

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

Липкий горизонтальный скролл