Редактор Wix: импорт анимаций Lottie на сайт
3 мин.
Анимации Lottie — это высококачественные анимированные файлы, которые можно добавить на сайт. Импортируя анимацию напрямую из аккаунта LottieFiles, вы можете создавать уникальные живые страницы без необходимости добавлять код.
Прежде чем начать:
Для импорта анимации необходимо иметь аккаунт LottieFiles.
Шаг 1 | Добавление анимации Lottie
Начните с добавления элемента «Анимация Lottie» на сайт из панели «Добавить элементы».
Чтобы добавить анимацию Lottie на сайт:
- Нажмите Добавить элементы
слева в редакторе.
- Выберите Вставки.
- Прокрутите вниз до раздела Анимация.
- Нажмите Lottie, чтобы добавить элемент на сайт.
Шаг 2 | Копирование URL анимации
После сохранения анимации в своем рабочем пространстве в LottieFiles вы можете скопировать URL и вставить его напрямую. Выберите свой собственный дизайн или импортируйте одну из сотен бесплатных анимаций, доступных на LottieFiles.com.
Чтобы получить и скопировать URL анимации:
- Войдите в свой аккаунт LottieFiles.
- Выберите нужную анимацию.
- Нажмите Save to workspace to generate.
- Нажмите на иконку копирования под надписью Asset link.
Знаете ли вы?
Анимации Lottie — это векторные файлы, поэтому они сохраняют качество как в версии сайта для компьютеров, так и для смартфонов.
Шаг 3 | Импорт файла на сайт Wix
Скопировав URL-адрес анимации, вставьте его в элемент на сайте Wix, чтобы создать интересный и уникальный интерфейс для посетителей.
Чтобы импортировать файл на сайт:
- Выберите элемент «Анимация Lottie» в редакторе.
- Нажмите на иконку настроек
.
- Вставьте URL-адрес в поле под заголовком Какой URL-адрес у анимации?.
- Нажмите Enter на клавиатуре.
Что дальше?
- Нажмите Превью, смотреть в верхней части панели, чтобы увидеть, как воспроизводится анимация.
- Используйте настройки, чтобы отрегулировать воспроизведение анимации. Подробнее о настройке анимации Lottie
Что нужно знать:
Анимации Lottie автоматически конвертируются в файлы JSON при импорте на сайт Wix. По техническим причинам не все поля файлов могут быть сохранены. Поэтому анимации Lottie могут выглядеть немного иначе на опубликованном сайте (например, с меньшим диапазоном или интенсивностью движения).