SVG анимация в Tilda Publishing: Шаг за шагом

Введение

Пример модификации

SVG анимация — это мощный инструмент для создания привлекательных и интерактивных веб-сайтов. Если вы ищете способы добавить анимацию на ваш сайт, то Tilda Publishing — это отличный вариант для реализации этой задачи. В этой статье мы рассмотрим шаг за шагом, как создается SVG анимация на Tilda Publishing. Мы сосредоточимся на двух вариантах анимации: автоматической и по скроллу. Автоматическая анимация позволяет создавать анимированные элементы, которые автоматически начинают свою анимацию, когда пользователь заходит на страницу. Анимация по скроллу позволяет создавать анимированные элементы, которые реагируют на действия пользователя, такие как прокрутка страницы. Рассмотрим каждый вариант более подробно и посмотрим, как легко создать уникальную и привлекательную SVG анимацию на Tilda Publishing.

Что такое SVG анимация в Tilda

SVG анимация в Tilda — это метод создания анимации на основе векторной графики. SVG (Scalable Vector Graphics) — это формат файлов векторной графики, который позволяет создавать гладкие, масштабируемые и интерактивные анимации. В отличие от растровых изображений, SVG файлы сохраняют качество изображения при масштабировании, что делает их идеальными для создания анимации для сайтов и приложений. SVG анимация может включать в себя такие элементы, как движение, изменение цвета, изменение размера и т.д. Она также может быть использована для привлечения внимания к определенным элементам на странице и улучшения пользовательского опыта.

Создание svg основы для анимации в Figma

Как вы уже поняли, svg анимация в Tilda состоит обычной векторной графики, которую можно скачать на фото стоках или нарисовать самостоятельно. В этой статье мы расскажем о втором способе.

Svg графику мы будем рисовать в графическом редакторе Figma.

1. Откройте графический редактор Figma.
2. Выберите инструмент «Pen» или «Pencil».
3. Нарисуйте вектор, исходя из дизайна вашего сайта.
4.  Экспортируйте вектор в формате svg.

SVG анимация в Tilda

Tilda Publishing — это платформа для создания сайтов, которая позволяет быстро и легко создавать красивые и современные сайты. Чтобы использовать SVG анимацию на вашем сайте Tilda Publishing, вам не нужно быть опытным разработчиком или иметь специальные навыки в векторной графике. Просто следуйте нашей инструкции:

1. Создайте zero block.
2. Нажмите на кнопку «+» и выберите «Add Shape».
3. В настройках «шейпа» нажмите на кнопку «upload file».
4. Выберите и загрузите в zero block ваш svg файл, который вы экспортировали из Figma.
5. Удалите фоновую заливку «шейпа».
6. Растяните и разместите «шейп» там, где по задумке должна присутствовать анимация.
7. Нажмите на кнопку «+» и выберите «Add HTML».
8. Вернитесь в графический редактор Figma.
9. Нажмите правой кнопкой мыши на ваш вектор и выберите «Copy/Paste as» и «Copy as SVG».
10. Вернитесь в zero block и откройте html элемент.
11. Нажмите на комбинацию клавиш «ctrl + v», чтобы вставить скопированный код.
12. Внутри тега <Path/> пропишите следующее «id= ‘mysvg’».
13. В атрибутах «width» и «height» пропишите 100%.
14. Закройте html элемент.
15. Выделите элемент «shape» и запомните значения в полях «X», «Y», «W» и «H».
16. Точно такие же значения присвойте html элементу в полях «X», «Y», «W» и «H».
17. Для настройки адаптивности анимации и блока в целом, настройте отображение элемента «shape» для всех размеров экранов в zero block. У html элемента должны быть точно такие же размеры и расположение, как у элемента «shape».
18. После настроек адаптивности скройте или удалите элемент shape.
19. Сохраните изменения и выйдите из зеро блока.

Автоматическая SVG анимация в Tilda

Чтобы реализовать автоматическую svg анимацию в тильде, выполните следующие шаги:

1. Нажмите на кнопку «+» после всех блоков на страницу и выберите html блок «Т123».
2. Нажмите на кнопку «Контент».
3. Скопируйте и вставьте в «Контент» следующий код:

4. Сохраните изменения и опубликуйте страницу.

SVG анимация в Tilda по скроллу

Чтобы реализовать svg анимацию в тильде по скроллу, выполните следующие шаги:

1. Нажмите на кнопку «+» после всех блоков на страницу и выберите html блок «Т123».
2. Нажмите на кнопку «Контент».
3. Скопируйте и вставьте в «Контент» следующий код:

4. Сохраните изменения и опубликуйте страницу.

Заключение

SVG анимация — это мощный инструмент, который позволяет создавать привлекательные и интерактивные веб-сайты. Tilda Publishing — это отличный выбор для тех, кто ищет удобный и легкий способ создания SVG анимации без необходимости изучать сложные языки программирования. В этой статье мы рассмотрели два варианта создания SVG анимации на Tilda Publishing: автоматическую и по скроллу. Мы рассмотрели каждый вариант пошагово, с примерами кода и графическими иллюстрациями. Теперь у вас есть все необходимые знания, чтобы начать создавать свою уникальную SVG анимацию на Tilda Publishing. Не стесняйтесь экспериментировать и создавать свои собственные анимации, которые помогут вашему веб-сайту выделиться среди остальных. Будьте творческими и удачи в создании ваших анимированных проектов!

Смотрите обучающие видео уроки по Тильде тут

Больше обучающих статей тут