AUTHWEB / LABМодификация 04 · Timeline progress
Стандартный контент · новый ритм

Покажите путь.
Выделите текущий шаг.

Линия этапов заполняется при прокрутке, маркеры отмечают пройденное, а текущий шаг получает акцент. Поверх штатного таймлайна Tilda, с его текстами, цифрами и ссылками.

HW101 · буллеты по центруHW202 · цифры слеваБез библиотекReduced motion

Живой предпросмотр

Прокручивайте внутри рамки ↓ Здесь движется внутренний контейнер. На реальной странице ниже модификация реагирует на прокрутку окна.

Код с вашими настройками

Настройки меняют только предпросмотр и код. Два штатных примера ниже используют базовую палитру.

01 / КОНТЕНТ
Добавьте HW101 или HW202

Заполните карточки обычным способом. У блока в настройках CSS Class Name укажите uc-aw-timeline. Автомасштабирование — «Нет».

02 / КОД
Вставьте сниппет в T123

Один HTML-блок после всех нужных таймлайнов. Скопируйте весь код. Другие стандартные блоки остаются без изменений.

03 / ПРОВЕРКА
Опубликуйте и прокрутите

Проверьте начало, конец и мобильную ширину. При уменьшении движения линия показана статично, все этапы и тексты доступны.

Настоящие блоки ниже: HW101 — центрированный · HW202 — нумерованный
Поддержка проверяется по структурам T547 и T550. Это не универсальный конвертер всех HW-блоков. Штатная линия остаётся на своём месте; модификация добавляет заливку и состояния. Содержимое не скрывается. Версия для опубликованных статичных блоков; динамическая подгрузка новых этапов требует повторной инициализации.
HW101 · История в движении
От идеи к структуре
Начинаем с понятной последовательности. Каждый этап остаётся обычным контентом стандартного блока Tilda.
Фокус на текущем шаге
Во время прокрутки заполняется штатная линия. Цвет маркера подсказывает, какую часть истории вы сейчас читаете.
Завершение маршрута
Последняя точка остаётся на своём месте. Модификация не рисует линию сквозь текст и не прячет содержание.
HW202 · Прогресс по этапам
Исследуем задачу
Собираем цели, ограничения и реальные сценарии. Контент хранится в стандартной карточке Tilda и остаётся доступным без модификации.
Собираем решение
Линия заполняется до позиции чтения, а текущий этап получает цветной маркер. Высота текста может быть любой: геометрия берётся из самого блока.
Проверяем и запускаем
Проверяем первый и последний этап, мобильную ширину и системное уменьшение движения. Ссылки и порядок чтения остаются штатными.
Made on
Tilda