Прорисовка SVG по скроллу
Постепенно рисует контур SVG в зависимости от прокрутки страницы.
Что делает модификация
Постепенно рисует контур SVG в зависимости от прокрутки страницы.
Требования
Проверьте классы и ID на опубликованной странице. Не назначайте этим же элементам конфликтующую анимацию. Если меняете имя класса в кабинете, укажите такое же имя в Tilda.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| ID path внутри SVG | Выберите значение в интерфейсе личного кабинета. |
| Множитель прогресса | Параметр 0.1–5 |
Пошаговая установка
- Подготовьте SVGЭкспортируйте SVG с контуром path. Если нужен URL файла, загрузите SVG в LF Drive. Для анимации вставьте сам SVG-код в HTML-элемент Zero Block, не обычную картинку.
- Задайте контурНужному path задайте id="mysvg", fill="none", stroke и stroke-width. Убедитесь, что ID не повторяется.
- Установите кодВ личном кабинете задайте параметры и сгенерируйте код. Вставьте полный результат в T123 после подготовленных блоков. Сохраните и опубликуйте страницу.
- Проверьте линиюОткройте опубликованную страницу. Для варианта по скроллу нужна страница выше одного экрана.
Проверьте классы и ID на опубликованной странице. Не назначайте этим же элементам конфликтующую анимацию. Если меняете имя класса в кабинете, укажите такое же имя в Tilda.
Частые вопросы
Где настроить модификацию?
После покупки откройте её в личном кабинете, задайте параметры и нажмите «Сгенерировать код».
Нужно ли править код вручную?
Параметры задаются в кабинете. Составные фрагменты вставьте в места, указанные в инструкции.
Пример использует мои блоки?
Пример показывает механику на демонстрационных элементах. На вашем сайте используются подготовленные элементы Tilda.