Анимированный градиент текста в Zero Block
Три цвета, угол и плавное движение заливки для заголовка или фрагмента текста.Подробнее о модеСвернуть описание
Анимированный градиент текста в Zero Block
Три цвета, угол и плавное движение заливки для заголовка или фрагмента текста.Что умеет мод
- Заполняет буквы движущимся градиентом из трёх выбранных цветов.
- Настраивает угол градиента, длительность цикла и плавность перехода.
- Предлагает варианты для обычного текста и текста с пошаговой анимацией Tilda.
- Позволяет применить эффект к фрагментам, оформленным через span внутри текста.
Как подключить
Подготовьте текст
Добавьте текстовый элемент в Zero Block и назначьте ему CSS Class Name gradient без точки. Задайте шрифт, размер и переносы в Tilda. Текст демонстрации в конструкторе не заменяет надпись на странице.
Выберите вариант применения
Для обычного заголовка используйте первый вариант. Если у текста включена пошаговая анимация, выберите второй. Третий вариант рассчитан на span внутри текстового элемента: проверьте, какие фрагменты действительно имеют эту обёртку.
Подберите движение
Задайте три цвета и угол. Увеличьте длительность, если нужен медленный перелив, затем выберите подходящую плавность. Проверьте читаемость всех цветов на фоне вашего блока.
Установите и проверьте
Вставьте сгенерированный код в T123 и опубликуйте страницу. Проверьте весь цикл перелива, переносы на телефоне и совместную работу с пошаговой анимацией, если она используется.
Что учитывать. Стандартный код использует класс gradient. Один такой код оформляет все подходящие элементы с этим классом; разные настройки в нескольких копиях будут конкурировать. Вариант для фрагмента выбирает все span внутри отмеченного текста. Он не определяет нужное слово по его содержимому.
Вопросы и ограничения
Где менять саму надпись?
В текстовом элементе Zero Block. Поле текста в превью служит только для демонстрации выбранного градиента.
Можно замедлить перелив?
Да. Увеличьте длительность цикла в секундах. Анимация будет повторяться автоматически с указанной скоростью.
Почему эффект не появился?
Проверьте класс gradient без точки, публикацию страницы и выбранный вариант разметки. Для обычного текста, пошаговой анимации и span используются разные селекторы.
Можно окрасить только одно слово?
Да, если нужный фрагмент обёрнут в span, а другие span не попадают под тот же селектор. Для предсказуемого результата можно вынести слово в отдельный текстовый элемент.
Доступ к конструктору
Это бесплатная модификация. Войдите в аккаунт, чтобы настроить её и получить код.
