Ясный взгляд

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

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

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

   

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

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

   💡 Совет: избегайте длинных текстов — это может негативно повлиять на производительность страницы.

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

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

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

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

• Размер размытия (*): Начальная степень размытия символов. Рекомендуемое значение — 5px.

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

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

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

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

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