АНИМАЦИЯ / ТЕКСТ / TILDA
Анимация текста по скроллу
Сдвигает два текстовых элемента навстречу друг другу при прокрутке страницы.
Живой пример
Что делает модификация
Сдвигает два текстовых элемента навстречу друг другу при прокрутке страницы.
Стандартные блоки TildaСледуйте требованиям в инструкции.
Готовый кодГотовый фрагмент для опубликованной страницы.
Настройки в аккаунтеВыберите параметры и скопируйте результат.
Требования
Скрипт меняет transform отмеченных элементов. Не назначайте тем же элементам другую анимацию transform.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| Класс первого текста | Выберите значение в интерфейсе личного кабинета. |
| Класс второго текста | Выберите значение в интерфейсе личного кабинета. |
| Начальное смещение, px | Параметр 0–1000 |
| Дистанция прокрутки, px | Параметр 100–3000 |
Пошаговая установка
- Создайте два текстаВ Zero Block создайте два текстовых элемента. Первому задайте scrolltext1, второму scrolltext2.
- Настройте движениеНачальное смещение задаёт расстояние от исходной позиции. Дистанция прокрутки определяет, когда элементы встречаются.
- Получите кодВ личном кабинете выберите параметры, нажмите «Сгенерировать код» и вставьте полный результат в блок T123 после подготовленных элементов. Не устанавливайте повторно обработчик для тех же элементов. Опубликуйте страницу.
- Проверьте краяПрокрутите опубликованную страницу. В редакторе элементы остаются на своих исходных позициях; предусмотрите место для их движения.
Важно
Скрипт меняет transform отмеченных элементов. Не назначайте тем же элементам другую анимацию transform.
Частые вопросы
Где менять параметры?
После покупки откройте модификацию в личном кабинете, выберите параметры и получите готовый код.
Нужно ли редактировать код вручную?
Параметры задаются в кабинете. Для составных модификаций вставьте подписанные части в места, указанные в инструкции.
Что показывает живой пример?
Пример показывает механику на демонстрационных элементах. На вашем сайте используются подготовленные блоки Tilda.