Цветной перелив

Инструкция по подключению расширения

Как работать с инструкцией?

Вы добавляете текстовый элемент на свою страницу в Taptop и присваиваете ему уникальный CSS-класс. Затем в генераторе кода вы указываете этот класс и настраиваете начальный и конечный цвета, а также параметры скорости анимации.

Генератор создает <script>, который вы вставляете в настройки страницы. Скрипт автоматически находит ваш текстовый блок по классу и применяет к нему анимацию смены цвета.

Как работает расширение?

1. Вы добавляете на страницу Taptop текстовый элемент (Text, Text Link или Div Block).

2. Вы присваиваете этому элементу уникальный CSS-класс.

3. В генераторе кода вы указываете этот класс и настраиваете желаемые параметры анимации.

4. Генератор создает <script>, который вы вставляете в настройки страницы Taptop.

5. Скрипт автоматически находит ваш элемент по классу и анимирует текст внутри него, как только элемент появляется в области видимости.

Пример работы анимации

Установка и использование

Шаг 1: Подготовьте текстовый элемент в Taptop

1. Добавьте текстовый элемент. В редакторе Taptop добавьте на страницу элемент, содержащий текст, например Text, Text Link или Div Block.

   

2. Присвойте класс (источник стилей). Выделите текстовый элемент и на панели стилей задайте ему уникальный CSS-класс, например js-text-animation-color. Если вы планируете использовать несколько анимаций на странице, используйте для каждой свой уникальный класс: js-text-animation-color-1, js-text-animation-color-2 и так далее.

   

   ⚠️ Важно: Если нескольким элементам на странице задать один и тот же класс, то анимация применится к каждому из них.

3. Настройте текст. Введите в созданный элемент тот текст, который вы хотите анимировать.

Шаг 2: Настройте генератор кода

Обратитесь к генератору кода и заполните следующие поля для каждой анимации:

• Класс (источник стилей) целевого элемента (*): Введите то же имя класса, которое вы задали текстовому элементу на шаге 1.

• Начальный цвет (*): Цвет текста в начале анимации в формате HEX (например, #7f7f7f).

• Конечный цвет (*): Цвет текста в конце анимации в формате HEX (например, #664ee8).

• Скорость анимации (*): Укажите общую длительность цветового перехода. Рекомендуемое значение — 0.3s.

• Задержка между символами (*): Установите время паузы перед изменением цвета следующего символа. Рекомендуемое значение — 0.05.

В секции "Дополнительные настройки" можно более тонко управлять поведением анимации:

• Задержка перед началом: Пауза перед запуском всей анимации после появления элемента на экране.

• Эффект замедления в середине: Анимация будет проигрываться медленнее в центральной части текста.

• Эффект замедления в конце: Скорость анимации будет плавно уменьшаться к концу текста.