5Туманный рассвет при скролле

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

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

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

   

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

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

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

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

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

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

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

• Начало анимации (*): Позиция на экране (относительно верха), где анимация начинает проигрываться. Указывается числом от 0 до 1 (например, 0.6 означает, что анимация начнется, когда элемент будет на 60% высоты экрана от верхнего края).

• Конец анимации (*): Позиция на экране, где анимация полностью завершается (например, 0.4 означает, что текст станет полностью видимым, когда элемент поднимется до 40% высоты экрана).

Совет: Для корректной работы убедитесь, что значение "Начало анимации" больше значения "Конец анимации". Это обеспечит проявление текста по мере прокрутки страницы вниз (и подъема элемента вверх по экрану).

Отличие от обычного "Туманный рассвет"

В отличие от базовой анимации "Туманный рассвет", эта версия привязана к скроллингу страницы:

• Обычная версия: Текст появляется автоматически при попадании в зону видимости

• Скролл версия: Появление текста зависит от позиции скролла, создавая интерактивный эффект