Как добавить анимации на сайт без CSS

Анимации помогают направить внимание и сделать появление блоков плавным. Для этого не нужно писать CSS или подключать библиотеку: элементы выбираются по селектору, а эффект задаётся в панели.

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

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

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

Скрипт newUX применяет анимацию к элементам, которые вы выбрали. Для каждого элемента задаётся CSS-селектор, тип эффекта и параметры. Анимации работают на Web Animations API, поэтому остаются плавными и на длинных страницах.

Шаг 1. Включите функцию

В панели управления сайтом отметьте функцию "Анимации". Дополнительный код для этого не нужен.

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

Укажите CSS-селектор элемента, например .card, #hero или main .article h2. Селектор берётся из кода страницы. Если не уверены, откройте страницу, нажмите правой кнопкой на нужный элемент и посмотрите его класс или id.

Шаг 3. Выберите эффект

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

Шаг 4. Настройте тайминги

Для каждого элемента задаются длительность, задержка и плавность. Ориентиры:

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

Короткая задержка создаёт ощущение последовательности. Если поставить её слишком большой, клиент успеет прокрутить страницу раньше, чем блок появится.

Шаг 5. Ограничьте область (необязательно)

Если анимации должны срабатывать не везде, укажите селектор контейнера, например .main-content. Тогда эффекты применяются только к элементам внутри него.

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

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

Итог

Анимации подключаются без CSS: выберите элемент, эффект и тайминги в панели. Начните с появления блоков и следите за скоростью. Если скрипт ещё не подключён, начните с инструкции "Как подключить скрипт newUX".