newUX: new User Experience

Как добавить анимации на Tilda

admin 2 мин чтения

Оживить страницу на Tilda можно без CSS и плагинов. Скрипт newUX применяет готовые эффекты к элементам, которые вы выберете. Подключение занимает несколько минут.

Зачем это нужно

Анимация направляет внимание: блоки появляются по очереди, и клиент замечает главное. Главное не переусердствовать, иначе движение начнёт мешать. Подробнее о правилах в статье "Микроанимации на сайте".

Как это работает

Скрипт применяет эффект к элементам по CSS-селектору. В Tilda у блоков и элементов есть классы, по которым их можно выбрать. Анимации работают на Web Animations API и не требуют библиотек.

Шаг 1. Вставьте скрипт

Добавьте на страницу блок T123 "HTML-код" и вставьте в него строку скрипта:

<script src="https://newux.ru/embed/ВАШ_ТОКЕН/script.js"></script>

Блок удобно разместить внизу страницы, чтобы он не мешал вёрстке. На нескольких страницах вставьте скрипт в каждую или в общий футер.

Шаг 2. Выберите элементы

В панели управления задайте CSS-селектор элемента, который нужно анимировать. Посмотреть класс можно так: откройте страницу, нажмите правой кнопкой на нужный блок и выберите просмотр кода. У Tilda блоки часто имеют идентификаторы вида #rec..., а внутри есть текстовые и графические элементы.

Шаг 3. Задайте эффект и тайминги

В каталоге есть готовые эффекты: появление, слайды в четырёх направлениях, увеличение и уменьшение, отскок, пульсация, переворот. Для контента подойдут появление и слайды, для акцентов пульсация. Ориентиры:

  • длительность появления: 300-600 мс;
  • задержка между соседними элементами: 60-120 мс;
  • плавность: ease-out для появления.

Шаг 4. Проверьте результат

Опубликуйте страницу и прокрутите её. Блоки должны появляться по мере прокрутки, а не все сразу. Проверьте страницу на телефоне: анимация не должна мешать читать.

Частые ошибки

  • Селектор не совпадает. Проверьте класс или id на странице.
  • Слишком много эффектов. Оставьте один-два на самых заметных блоках.
  • Блок анимируется целиком. Сузьте селектор до конкретного элемента.

Итог

На Tilda анимации подключаются блоком HTML-код и настройками в панели. Начните с появления блоков и следите за скоростью. Пошагово общий случай разобран в статье "Как добавить анимации на сайт".

← Все статьи