12Цветной перелив при скролле

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

Отличие от обычного "Цветной перелив"

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

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

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