Импорт анимации Lottie на сайт
2 мин. чтения
Анимация Lottie - это высококачественные анимированные файлы, которые вы можете добавить на свой сайт. Импортируя анимацию прямо из своего аккаунта LottieFiles, вы можете создавать уникальные, живые страницы без необходимости добавлять какой-либо код.
![Онлайн-сайт с текстом «Подводное приключение Лейлы». Играет анимация медузы и пузырей.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/9bf442b0-1550-4882-9f57-8af73cce3b88/c8c72d58-3089-4074-b23a-995d771bac07.gif)
Прежде чем начать:
Чтобы импортировать анимацию, у вас должен быть аккаунт LottieFiles.
Шаг 1 | Добавьте анимацию Lottie
Начните с добавления элемента Lottie Animation на свой сайт из панели «Добавить».
Чтобы добавить анимацию Lottie на сайт:
- Нажмите Добавить
в левой части редактора.
- Выберите Вставить код.
- Прокрутите вниз до раздела Анимация.
- Нажмите Lottie, чтобы добавить ее на свой сайт.
Шаг 2 | Скопируйте URL-адрес анимации
После добавления элемента на сайт импортируйте выбранную анимацию, скопировав URL-адрес Lottie. Выберите свой дизайн или импортируйте одну из сотен бесплатных анимаций, доступных на сайте LottieFiles.com.
Чтобы получить и скопировать URL-адрес анимации:
- Войдите в свой аккаунт LottieFiles.
- Выберите анимацию.
- Нажмите значок Копировать
в разделе URL-адрес Lottie Animation.
![Скриншот URL анимации на сайте lottiefiles.com](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/b0157265-3a42-4824-8320-125445a6ba4c/b5b99758-02de-4d48-89f1-42cee0dd50b3.png)
Интересный факт
Анимация Lottie - это векторные файлы, поэтому они сохраняют свое качество как на компьютере, так и на мобильном сайте.
Шаг 3 | Импортируйте файл на сайт Wix
После того, как вы скопировали URL-адрес анимации, вставьте его в элемент на своем сайте Wix.
Чтобы импортировать файл на сайт:
- Выберите элемент Lottie Animation в редакторе.
- Нажмите на значок Настроить
.
- Вставьте URL-адрес файла в поле URL-адрес анимации?
- Нажмите Enter на клавиатуре.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8e662bac-0b92-4908-8387-43e27fd0496e/2022/07/15/d150d253-1aad-4477-a639-3ba67017611e/1352ce4b-668a-49be-b588-b371bbe54995.png)
Что дальше?
- Нажмите Предпросмотр анимации в верхней части панели, чтобы увидеть, как воспроизводится анимация.
- Используйте настройки, чтобы настроить воспроизведение анимации. Подробнее о настройке анимации Lottie