NLM105 • Время настройки: 1 минута
Анимация появления в Тильде — анимация по скроллу для элементов в Zero Block
Модификация позволяет добавить стильную анимацию появление элементов в Зеро блоке. Например тексты, шейпы, формы, кнопки и.т.д.
Смотрите, как быстро установить модификацию
Инструкция
Для того чтобы добавить анимации появления для элементов в Зеро блоке нужно сделать следующее:
1. «Введите класс элемента (image, shape, text)» — В модификации нужно указать название класса, который мы будем добавлять к элементам в Зеро блоке, чтобы модификация понимала к какому элементу ей добавлять анимацию. Например — anim_shape;
2. «Отключить на мобильных устройствах» — При желании можно отключить анимацию на мобильных устройствах. Для этого активируйте ограничение, нажав на галочку рядом с текстом «Отключить на мобильных устройствах»;
3. «Проигрывать анимацию каждый раз, когда элемент на экране" — Есть возможность активировать функцию «Проигрывать анимацию каждый раз, когда элемент на экране». По умолчанию анимация проигрывается каждый раз когда элемент на экране.
4. «Тип анимации» — На выбор предлагается один из 10 анимации появления элемента.
5. «Включите этот чекбокс если анимация не работает в сафари».
6. «Прозрачность фона, %» — Указывает уровень прозрачности: 0% — полностью прозрачный (невидим), 100% — полностью непрозрачный. Работает только с шейпами.
7. «Задержка до начала анимации (мс)» — Время в миллисекундах до начала проигрывания анимации. Например, 500 мс = полсекунды задержки.
8. «Время проигрывания анимации (мс)» — Длительность анимации в миллисекундах от начала до конца. Например, 300 мс — быстрая анимация, 1000 мс — более плавная.
9. Дальше скопируйте название класса, которое вы указали и перейдите в Зеро блок;
10. Для того чтобы добавить анимацию к элементу в Зеро блоке, нажмите правой кнопкой мыши на элемент и выберите пункт «Add CSS Class Name»;
11. В открывшейся панели, в поле «CSS Class Name» укажите класс, который вы придумали и указали в модификации;
12. Сохраните изменения и перейдите во вкладку модификации;
13. Копируем сгенерированный HTML код и вставляем его в блок Т123.
Важно:
1. «Введите класс элемента (image, shape, text)» — В модификации нужно указать название класса, который мы будем добавлять к элементам в Зеро блоке, чтобы модификация понимала к какому элементу ей добавлять анимацию. Например — anim_shape;
2. «Отключить на мобильных устройствах» — При желании можно отключить анимацию на мобильных устройствах. Для этого активируйте ограничение, нажав на галочку рядом с текстом «Отключить на мобильных устройствах»;
3. «Проигрывать анимацию каждый раз, когда элемент на экране" — Есть возможность активировать функцию «Проигрывать анимацию каждый раз, когда элемент на экране». По умолчанию анимация проигрывается каждый раз когда элемент на экране.
4. «Тип анимации» — На выбор предлагается один из 10 анимации появления элемента.
5. «Включите этот чекбокс если анимация не работает в сафари».
6. «Прозрачность фона, %» — Указывает уровень прозрачности: 0% — полностью прозрачный (невидим), 100% — полностью непрозрачный. Работает только с шейпами.
7. «Задержка до начала анимации (мс)» — Время в миллисекундах до начала проигрывания анимации. Например, 500 мс = полсекунды задержки.
8. «Время проигрывания анимации (мс)» — Длительность анимации в миллисекундах от начала до конца. Например, 300 мс — быстрая анимация, 1000 мс — более плавная.
9. Дальше скопируйте название класса, которое вы указали и перейдите в Зеро блок;
10. Для того чтобы добавить анимацию к элементу в Зеро блоке, нажмите правой кнопкой мыши на элемент и выберите пункт «Add CSS Class Name»;
11. В открывшейся панели, в поле «CSS Class Name» укажите класс, который вы придумали и указали в модификации;
12. Сохраните изменения и перейдите во вкладку модификации;
13. Копируем сгенерированный HTML код и вставляем его в блок Т123.
Важно:
- Текстовый элемент не должен выходить за пределы блока по высоте/ширине, иначе текст не отобразится на странице.
- Для текстовых элементов нужно изменить настройку FIT на Fixed Size. Где найти: Редактировать блок → Element Settings → Fit. Проверьте это при появлении уведомления «Следующие заголовки выходят по размерам за пределы страницы».
Сгенерируйте код для своего сайта
Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Подробнее о реферальной программе
Скопировать обычную ссылку
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Тильда анимация появления — что на самом деле работает
Анимация в Тильде делится на два типа: системная, которая уже есть в стандартных блоках, и кастомная — та, что добавляется в Zero Block через модификацию. Системная помогает быстро оживить страницу, но часто выглядит одинаково на разных сайтах.
Модификация NLM105 от Nolim добавляет анимацию по скроллу для элементов в Zero Block: текстов, изображений, кнопок, форм и шейпов. Такие эффекты часто называют AOS — Animate On Scroll, то есть анимация при появлении элемента в зоне видимости. Пользователь листает страницу, а нужные элементы появляются плавно, с задержкой и выбранным типом движения.
Модификация NLM105 от Nolim добавляет анимацию по скроллу для элементов в Zero Block: текстов, изображений, кнопок, форм и шейпов. Такие эффекты часто называют AOS — Animate On Scroll, то есть анимация при появлении элемента в зоне видимости. Пользователь листает страницу, а нужные элементы появляются плавно, с задержкой и выбранным типом движения.
Как установить за 5 минут
Открой генератор на странице модификации и задай класс элемента, например `anim_text` или `anim_shape`. Затем выбери тип анимации появления, задержку до старта, длительность проигрывания и режим повторного запуска при скролле.
После этого перейди в Zero Block, нажми правой кнопкой мыши на нужный элемент и выбери «Add CSS Class Name». Впиши тот же класс, который указал в генераторе. Затем скопируй готовый код, вставь его в блок T123 и опубликуй страницу.
После этого перейди в Zero Block, нажми правой кнопкой мыши на нужный элемент и выбери «Add CSS Class Name». Впиши тот же класс, который указал в генераторе. Затем скопируй готовый код, вставь его в блок T123 и опубликуй страницу.
Где использовать анимацию по скроллу
Анимация по скроллу хорошо работает там, где нужно управлять вниманием пользователя: на первом экране, в блоке преимуществ, карточках услуг, тарифах, шагах процесса, портфолио и формах заявки. Элемент появляется не сразу, а в момент, когда пользователь до него долистал.
Например, заголовок можно показать через лёгкое появление, карточки — через последовательную задержку, кнопку — через мягкое выдвижение снизу. Так страница выглядит живее, но не превращается в набор случайных эффектов.
Например, заголовок можно показать через лёгкое появление, карточки — через последовательную задержку, кнопку — через мягкое выдвижение снизу. Так страница выглядит живее, но не превращается в набор случайных эффектов.
Почему не стоит анимировать всё подряд
Главная ошибка — добавить анимацию по скроллу на каждый элемент страницы. Если двигается всё, пользователь перестаёт понимать, где главный акцент. Анимация должна помогать читать страницу, а не спорить с текстом и интерфейсом.
Лучше выбрать 2−3 типа элементов и настроить для них общую логику: например, заголовки появляются плавно, карточки выезжают снизу, кнопки появляются с небольшой задержкой. Так сайт сохраняет единый ритм и выглядит аккуратно.
Лучше выбрать 2−3 типа элементов и настроить для них общую логику: например, заголовки появляются плавно, карточки выезжают снизу, кнопки появляются с небольшой задержкой. Так сайт сохраняет единый ритм и выглядит аккуратно.
Как настроить задержку и скорость
Для большинства блоков достаточно короткой анимации: 300−600 мс. Если сделать движение слишком быстрым, пользователь его почти не заметит. Если слишком медленным — страница начнёт казаться тяжёлой.
Задержку лучше использовать для групп элементов. Например, карточки преимуществ можно показывать по очереди: первая без задержки, вторая через 150 мс, третья через 300 мс. Такой приём помогает создать порядок чтения и не перегружает экран.
Задержку лучше использовать для групп элементов. Например, карточки преимуществ можно показывать по очереди: первая без задержки, вторая через 150 мс, третья через 300 мс. Такой приём помогает создать порядок чтения и не перегружает экран.
Что проверить после публикации
Проверь страницу на десктопе, планшете и телефоне. На мобильной версии часть анимаций лучше отключить: экран меньше, пользователь скроллит быстрее, а лишнее движение может мешать чтению.
Отдельно проверь текстовые элементы в Zero Block. Если текст выходит за границы блока, он может отображаться некорректно. Для таких элементов лучше заранее настроить Fixed Size в параметре Fit и убедиться, что заголовки не обрезаются после публикации.
Отдельно проверь текстовые элементы в Zero Block. Если текст выходит за границы блока, он может отображаться некорректно. Для таких элементов лучше заранее настроить Fixed Size в параметре Fit и убедиться, что заголовки не обрезаются после публикации.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Открой nolim.cc/animation-appearance, выбери тип анимации (fade, slide, zoom), задай задержку, длительность и другие параметры. Скопируй код и вставь его в блок «HTML-код».
Да. Генератор Nolim позволяет настраивать анимацию для каждого блока отдельно — ты выбираешь тип (fade-in, slide-up, zoom-in), задержку и длительность для каждого элемента. Это работает через атрибуты data-aos, которые добавляются к нужным контейнерам.
Нет. AOS-библиотека (Animate on Scroll) весит около 6 КБ (gzip) и подключается асинхронно. Анимация срабатывает только при появлении блока в зоне видимости, поэтому не влияет на LCP (Largest Contentful Paint) и Core Web Vitals страницы.
Было: лендинг онлайн-курса показывал все блоки статично — страница воспринималась как одна длинная простыня.
Стало: после подключения AOS-анимации через Nolim блоки появляются последовательно с нарастающей задержкой. Процент дочитывания до блока с ценами вырос с 34% до 57%.
Стало: после подключения AOS-анимации через Nolim блоки появляются последовательно с нарастающей задержкой. Процент дочитывания до блока с ценами вырос с 34% до 57%.