10Плывущие строки

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

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

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

   

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

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

   💡 Совет: Для достижения наилучшего эффекта рекомендуется использовать заглавные буквы.

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

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

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

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

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

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

• Высота текста: Финальная высота символов для корректного отображения. Подбирается в зависимости от шрифта (например, 1.02em).

• Прозрачность двойного эффекта: Начальная прозрачность второго экземпляра символа, который появляется снизу. 0 — полностью прозрачный.

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

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

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