Анимация на Тильде: как сделать эффекты появления, параллакс и пошаговую анимацию
Анимация на Тильде настраивается в Zero Block: у каждого элемента есть секция BASIC ANIMATION с эффектами появления Fade In и Zoom In, параллаксом и фиксацией. Пошаговая и триггерная анимация описаны в отдельных статьях справки. Zero Block доступен с тарифа Personal за 500 ₽ в месяц при оплате за год (на 20 октября 2026).
Ответ за 30 секунд
Основные настройки анимации живут в Zero Block, а он открывается с тарифа Personal. Для появления элемента хватает базовой анимации: выберите Fade In или Zoom In, задайте Duration и Delay. Каждый движущийся элемент добавляет нагрузку на телефон, поэтому анимируйте только главное. Названия по справке Тильды на 20 октября 2026.
Zero Block с анимацией и свой домен подключаются на одном тарифе Personal. Домен .ru от 200 ₽ за первый год (Таймвеб, на 20 октября 2026).
Подберите вид анимации на Тильде под свою задачу6вариантов появления в Zero Block
3вида анимации в справке
500 ₽в месяц Personal с Zero Block
01 · 1 мин
Какие виды анимации есть на Тильде и где они включаются#
В справке Тильды анимация Zero Block разбита на три статьи плюс отдельная микроанимация страницы.
| Вид | Что делает | Где включается |
|---|---|---|
| Базовая анимация | Появление, параллакс, фиксация элемента | Настройки элемента, секции BASIC ANIMATION и PARALLAX |
| Пошаговая анимация | Несколько шагов движения одного элемента | Zero Block, статья справки «Пошаговая анимация» |
| Триггерная анимация | Запуск анимации триггером | Zero Block, статья «Триггерная анимация» |
| Микроанимация страницы | Индикатор загрузки и прокрутки | Статья «Микроанимация загрузки и прокрутки» |
Редактор Zero Block подробно описан на странице Zero Block на Тильде. Для движения отдельных элементов обычно берут именно его.
02 · 1 мин
Как сделать эффект появления на Тильде: Fade In и Zoom In#
- Откройте Zero Block и выберите нужный элемент: заголовок, картинку или кнопку.
- Найдите секцию BASIC ANIMATION в настройках элемента и в поле ANIMATION выберите эффект.
- Задайте параметры из таблицы ниже и опубликуйте страницу: в режиме редактирования движение видно не всегда.
| Параметр | Что задаёт |
|---|---|
| Fade In | Простое появление |
| Fade In Left, Right, Up, Down | Появление с нужного края |
| Zoom In | Появление с увеличением или уменьшением, размер задаёт Scale |
| Duration | Длительность анимации в секундах |
| Delay | Задержка перед стартом в секундах |
| Trigger Offset | Отступ в пикселях от нижнего края окна, при котором анимация запускается |
| Distance | Расстояние, которое проходит элемент при Fade In с края |
Начните с Fade In Up для заголовка: небольшой подъём вверх читается как мягкое появление и не отвлекает от текста. Длительности около секунды достаточно. Для картинки рядом поставьте чуть большую задержку Delay, чтобы элементы выходили по очереди, а не все сразу.
03 · 1 мин
Как сделать параллакс на Тильде: скролл, мышь и фиксация#
Параллакс двигает элемент с другой скоростью, чем прокручивается страница, и создаёт ощущение глубины. Его включают в секции PARALLAX настроек элемента.
По скроллу. Параметр Speed меньше 100% двигает элемент медленнее прокрутки, больше 100% быстрее. Для фона подбирают небольшую разницу, иначе картинка уезжает с экрана.
По движению мыши. Расстояние по осям X и Y задаёт максимальное смещение элемента. На телефоне мыши нет, поэтому такой эффект там не виден.
Фиксация. Элемент закрепляется на верхней, средней или нижней части окна (On Window Top, On Window Center, On Window Bottom) и проходит заданную дистанцию. Так картинка остаётся на месте, пока рядом листается текст.
04 · 1 мин
Пошаговая анимация на Тильде: когда она нужна и чем отличается от базовой#
Базовая анимация даёт один эффект на элемент: он появился и всё. Пошаговая анимация нужна, когда элемент должен пройти цепочку состояний, например выехать, увеличиться и сменить прозрачность. Для каждого шага меняют свойства элемента, поэтому на экране получается маленькая сцена.
Триггерная анимация запускается триггером, то есть по заданному условию. Порядок настройки описан в статьях справки «Пошаговая анимация» и «Триггерная анимация». Начинайте с одного элемента и двух шагов: сложные сцены сложно отлаживать.
Инструмент · 1 мин
Подберите вид анимации на Тильде под свою задачу#
Ответьте на два вопроса о задаче и тарифе.
Какую анимацию выбрать на Тильде
Выберите задачу и свой тариф, подсказка назовёт нужный раздел настроек.
06 · 1 мин
Сколько анимации выдержит страница Тильды и как не замедлить сайт#
Движение ничего не весит само по себе, но каждый анимированный элемент работает в браузере посетителя. Если на экране десятки движущихся деталей, слабые телефоны начинают подтормаживать при прокрутке.
Анимируйте заголовок первого экрана, главное изображение и призыв к действию. Остальное оставьте неподвижным. Что ещё влияет на скорость, разобрано на странице скорость сайта на Тильде.
07 · 1 мин
Вопросы об анимации на Тильде#
Можно ли сделать анимацию на Тильде на бесплатном тарифе?
Настройки анимации элементов находятся в Zero Block, а он доступен с тарифа Personal, поэтому на Free их нет.
Как сделать параллакс на Тильде при прокрутке страницы?
Откройте настройки элемента в Zero Block, секцию PARALLAX, и задайте Speed. Меньше 100% элемент движется медленнее прокрутки, больше 100% быстрее.
Что такое Trigger Offset в анимации Тильды?
Это отступ в пикселях от нижнего края окна браузера, при достижении которого запускается анимация элемента.
Чем пошаговая анимация на Тильде отличается от базовой?
Базовая задаёт один эффект появления, параллакса или фиксации. Пошаговая строит цепочку из нескольких шагов для одного элемента.
Почему этому можно верить
Как мы проверяли
Источники цифр на этой странице: Тарифы Тильды, tilda.cc/ru/pricing, проверено 20 октября 2026; Домены Таймвеб, timeweb.com/ru/services/domains, проверено 20 октября 2026; Виртуальный хостинг Таймвеб, timeweb.com/ru/services/hosting, проверено 20 октября 2026; Справка Тильды: базовая анимация Zero Block, help-ru.tilda.cc/zero/animation, проверено 20 октября 2026.
Зарегистрируйте домен для сайта
Чтобы сайт на Тильде открывался по своему адресу, нужен домен. Домены Timeweb: более 300 зон, бесплатный SSL и единая панель.
- .ru и .рф от 200 ₽ за первый год
- Более 300 доменных зон
- Бесплатный SSL на домен
- Подключение к Тильде одной записью