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