Как анимировать прорисовку SVG в Zero Block
Последовательное появление линий векторного рисунка при загрузке или входе в экран.Подробнее о модеСвернуть описание
Как анимировать прорисовку SVG в Zero Block
Последовательное появление линий векторного рисунка при загрузке или входе в экран.Что умеет мод
- Прорисовывает линии векторных элементов с обводкой внутри Zero Block.
- Запускает движение сразу после загрузки или при появлении рисунка в окне.
- Настраивает длительность, стартовую задержку, интервал между линиями и повторение.
- Сохраняет исходную обводку или задаёт свой цвет, толщину, концы и соединения линий.
Как подключить
Подготовьте вектор
Создайте элемент Vector в Zero Block или импортируйте SVG в векторный редактор. У нужных линий должна быть обводка. Фотография и SVG, вставленный обычным элементом Image, не подходят для этой настройки.
Задайте класс и область
Назначьте векторам CSS Class Name dbm-vector-draw без точки либо свой короткий класс из конструктора. В «Где применять» выберите родительский блок по ID или общему uc-классу.
Настройте проигрывание
Выберите запуск, направление, длительность и задержку между линиями. Задайте число повторов или зацикливание. При необходимости включите паузу вне окна и измените параметры обводки.
Проверьте результат
Разместите код в T123 после выбранных блоков и опубликуйте страницу. Проверьте порядок линий, момент запуска, повторение и вид рисунка на телефоне. При необходимости скорректируйте сам вектор в Tilda.
Что учитывать. Заполненный силуэт без обводки не становится контурным рисунком автоматически. Подготовьте линии до подключения мода. При системной настройке уменьшения движения показывается законченный рисунок без анимации. Один класс можно назначить нескольким векторам в выбранной области.
Вопросы и ограничения
Нужно загружать SVG отдельной картинкой?
Нет. Для этого мода нужен векторный элемент Zero Block с доступными линиями и обводкой. Файл можно импортировать в векторный редактор.
Можно сохранить цвет из Tilda?
Да. Оставьте выключенным «Задать цвет и толщину»: эти параметры останутся у исходного вектора.
Можно рисовать линии по очереди?
Да. Настройка «Между линиями» добавляет задержку. Очерёдность зависит от порядка линий внутри самого SVG.
Почему на одном устройстве рисунок сразу готовый?
Проверьте системное уменьшение движения. Если оно включено, мод намеренно пропускает анимацию и оставляет рисунок видимым.
Доступ к конструктору
Это бесплатная модификация. Войдите в аккаунт, чтобы настроить её и получить код.
