Перейти к содержимому
Забрать бесплатно
Модификации выключены. Так эта страница выглядит на обычной Тильде.
РАЗДЕЛ КАТАЛОГА · КОД ОТКРЫТ

Анимация при скролле и наведении на Тильде

Анимация, у которой спусковой крючок — скролл или наведение, в Тильде разложена по разным файлам, и качество у них разное. Кадр Zero Block привязан к requestAnimationFrame, а движение обложки считается прямо на событии скролла — отсюда разница в плавности, которую видно на глаз и которую бессмысленно объяснять настройками. В разделе — моды, которые вешаются на секцию, и разборы того, почему анимация не срабатывает.

СОБРАНО
5 модов
ОБЪЯВЛЕНО
0 модов
БЛОКИ ТИЛЬДЫ
3
РАЗБОРОВ
6
Собрано 5 КОД ОТКРЫТ · ПРОВЕРЕН НА ЖИВОЙ ТИЛЬДЕ

Моды раздела, у которых есть код

Сверка с кодом Тильды ИМЕНА ФУНКЦИЙ — ЧТОБЫ МОЖНО БЫЛО ПРОВЕРИТЬ

Что из этого Тильда делает сама

Сверка по рантайму здесь даёт не «умеет или нет», а разное качество в двух местах, где Тильда делает одно и то же.

MOD-146 · Зависимая анимация по наведению
ДЕЛАЕТ САМА

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

ГДЕ ЭТО В РАНТАЙМЕ

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

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

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

MOD-127 · Параллакс для обложки
ДЕЛАЕТ САМА

Слои Zero Block двигаются на разной скорости при скролле.

ГДЕ ЭТО В РАНТАЙМЕ

`t_animationExt__animateParallaxOnScroll` в `tilda-animation-ext-1.0.min.js`; у обложки — `t_cover__parallaxUpdate` в `tilda-cover-1.0.min.js`.

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

У Zero Block кадр уже привязан к `requestAnimationFrame`, так что «без дёрганья» — родное поведение, и обещать это как своё нечестно. У обложки иначе: в `tilda-cover-1.0.min.js` `requestAnimationFrame` не встречается ни разу, движение считается прямо на событии скролла.

MOD-178 · Липкий горизонтальный скролл
ДЕЛАЕТ САМА

Zero Block умеет пошаговую анимацию от скролла, режим вылета артборда и собственные липкие обёртки элементов.

ГДЕ ЭТО В РАНТАЙМЕ

`data-animate-sbs-event="scroll"`, `data-artboard-ovrflw`, `.tn-atom__sticky-wrapper` и события изменения ширины Zero Block.

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

Готового сценария «закрепить секцию и перевести вертикальный прогресс в горизонтальный путь ленты» нет; неосторожный overflow при этом отменяет sticky.

MOD-190 · Переворачивающаяся карточка
ДЕЛАЕТ САМА

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

ГДЕ ЭТО В РАНТАЙМЕ

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

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

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

@BUTON_SUPPORT

Нужно то, чего в разделе нет?

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

Написать в телеграм Мод под задачу
ПН–ПТ 10:00–20:00 МСК · СБ 12:00–18:00