Текст по кривой в Tilda: волна, круг и движение при скролле

Короткую фразу можно провести по волне между секциями или пустить по кругу рядом с иллюстрацией. Такой приём работает как часть композиции: надпись остаётся читаемой, а движение связывает её с прокруткой страницы.

В этом моде текст и шрифт берутся из Zero Block. Конструктор отвечает за траекторию и движение. Разберём, какие два элемента нужно подготовить и почему изменения текста в превью не меняют надпись на сайте.

В Zero Block добавьте шейп без фоновой заливки и назначьте ему CSS-класс dbm-path-area. Размер и положение фигуры задают область, в которой появится текст по кривой. Для готовой волны или круга рисовать собственную траекторию заранее не нужно.

Оставьте вокруг достаточно места. Если область узкая, длинная фраза будет тесниться на изгибах; если слишком низкая — часть композиции может оказаться у края. Подберите размеры фигуры отдельно для мобильных экранов. Сначала добейтесь аккуратной неподвижной композиции, а уже потом оценивайте скорость движения.

Создайте текстовый элемент с классом dbm-path-source в том же Zero Block. В нём задайте надпись, шрифт, размер, цвет и нужное локальное форматирование. В разделе «Где применять» укажите родительский блок, содержащий и текст, и область.

Поля текста и цвета внутри демонстрации конструктора нужны для примерки эффекта. На опубликованной странице эти значения берутся из исходного элемента Tilda. Если вы поменяли фразу в превью, но на сайте осталась старая, откройте текст в Zero и измените его там. Это позволяет дальше редактировать содержание привычным способом.

Для первого подключения возьмите готовый пресет: волну, арку, круг или другую доступную форму. Короткую фразу проще проверить на изгибах, чем длинный абзац. Следите, чтобы буквы не сбивались в плотное пятно и сохраняли понятное направление чтения.

Если нужна собственная кривая, можно вставить значение d из SVG path или весь SVG. Конструктор берёт первый путь и его viewBox. Поэтому файл с несколькими случайными контурами может дать совсем не ту форму. Подготовьте отдельную траекторию, которую действительно хотите использовать, и проверьте её пропорции в области Zero.

Выберите режим: движение по скроллу, вариант с фиксацией блока или непрерывное движение без прокрутки. Для уже настроенной SBS-фиксации предусмотрен отдельный режим — не стоит одновременно настраивать две независимые фиксации в надежде, что они сложатся сами.

Затем подберите направление, начальную позицию и повтор текста. В непрерывном режиме задайте время цикла. Проверьте начало и конец фразы: повтор должен выглядеть осмысленно, а не как случайное обрезанное слово. Если надпись важна для понимания предложения, она должна читаться без ожидания нескольких оборотов.

Разместите T123 с полученным кодом сразу после Zero Block и опубликуйте страницу. Откройте её на компьютере и телефоне, прокрутите в обе стороны и посмотрите, как ведёт себя текст на старте анимации.

При смене ширины проверьте размер принимающей фигуры и исходную типографику. Движение может оставаться правильным, но буквы окажутся слишком крупными для мобильной области. Не пытайтесь исправить это только скоростью: сначала добейтесь подходящих размеров текста и пути. Основные заголовки и важную информацию страницы лучше оставить доступными и в обычном, легко читаемом виде.

Сверьте оба класса и выбранный родительский блок. Убедитесь, что нужный текст и область действительно находятся вместе. Если скачивали SVG-направляющую, помните: её загрузка сама по себе не добавляет движущийся текст.

• Надпись и шрифт изменяются в исходном текстовом элементе Tilda.
• Собственный SVG содержит нужный первый path.
• Начальная позиция и направление подходят для чтения.
• На телефоне область вмещает кривую и буквы.

Старые подключения с классами path-text и zero-text не нужно переименовывать только ради перехода на новую инструкцию.

Читайте также: Анимированный градиент текста в Tilda: как сделать плавный перелив · Появление элементов при скролле в Tilda: как настроить по очереди.