13Двойной цветной перелив

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

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

Вы добавляете текстовый элемент на свою страницу в 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-double-color-flow. Если вы планируете использовать несколько анимаций на странице, используйте для каждой свой уникальный класс: js-double-color-flow-1, js-double-color-flow-2 и так далее.

   

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

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

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

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

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

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

• Промежуточный цвет (*): Цвет текста в середине анимации, на который будет переход и с которого начнется возврат. Формат HEX (например, #664ee8).

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

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

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

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

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

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