Анимированный градиент текста в Tilda: как сделать плавный перелив

В заголовке лендинга иногда хочется выделить одно слово цветом. Плавный перелив может сделать этот акцент заметнее, не меняя шрифт и саму композицию. Но если один из цветов сливается с фоном, красивое движение превращается в исчезающий текст.

Конструктор анимации градиента заполняет буквы тремя выбранными цветами. Покажем, как подключить его к тексту Zero Block и проверить читаемость на протяжении всего перелива.

Добавьте обычный текстовый элемент и задайте надпись, шрифт, размер и переносы в Tilda. Назначьте ему CSS Class Name gradient без точки. Именно этот текст появится на сайте; демонстрационная надпись в конструкторе нужна только для подбора эффекта.

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

В конструкторе есть разные варианты подключения. Первый подходит обычному тексту. Если у надписи включена пошаговая анимация Tilda, выберите соответствующий второй вариант. Третий рассчитан на фрагменты, которые находятся внутри span.

Вариант для фрагментов не ищет слово по его смыслу или содержимому. Он обрабатывает подходящие span внутри отмеченного текста. Если таких обёрток несколько, цвет может измениться сразу у нескольких частей. До публикации проверьте, какую разметку вы действительно подготовили.

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

Затем настройте угол: он меняет направление цветовых переходов внутри надписи. Не пытайтесь исправить плохой контраст скоростью движения. Заголовок должен читаться и в тот момент, когда самый светлый цвет проходит через важное слово.

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

Для длинной надписи попробуйте более медленный вариант. Если на странице уже двигаются фон, фотографии и кнопки, оставьте градиент небольшим акцентом. Необязательно применять его ко всем заголовкам: одинаковое движение в каждом разделе быстро перестаёт помогать.

1. Проверьте класс gradient у нужного текстового элемента.
2. Выберите в конструкторе вариант для своей разметки.
3. Настройте цвета, угол, длительность и плавность.
4. Скопируйте код в T123 и опубликуйте страницу.
5. Посмотрите весь цикл на компьютере и телефоне.

Один стандартный код оформляет подходящие элементы с этим классом. Несколько копий с разными настройками могут конкурировать. Не добавляйте вторую копию только ради ещё одного заголовка с тем же оформлением.

Сравните переносы с макетом, особенно на узком экране. Убедитесь, что градиент не задел соседнюю надпись и что текст остаётся читаемым во всех цветовых состояниях. Если используется пошаговая анимация, проверьте её совместную работу с переливом.

При отсутствии эффекта сначала сверьте класс и выбранный вариант. При неверной надписи вернитесь к самому тексту в Zero. При слишком быстром движении увеличьте длительность, а не пытайтесь компенсировать его дополнительными задержками в других блоках.

Читайте также: Lottie-анимация в Tilda: как добавить в Zero Block и настроить запуск · Появление элементов при скролле в Tilda: как настроить по очереди.