8Ясный взгляд при скролле

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

Отличие от обычного "Ясный взгляд"

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

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

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