Редактор Studio: Добавление анимации входа
3 мин. чтения
Добавление анимации входа к элементу — это отличный способ привлечь к нему внимание посетителей. Анимация появляется, когда элемент впервые попадает в поле зрения, поэтому он мгновенно бросается в глаза. Вы можете выбирать из различных типов анимаций и настраивать их в соответствии с потребностями вашего клиента.
![Пример секции на опубликованном сайте с элементами, каждыми со своей установленной анимацией входа](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/08cda0fe-8d63-4b62-8182-264266262d50/3840b03b-dd9e-4675-bb32-0c42d128a960.gif)
Содержание:
Добавление анимации входа
Вы можете добавить анимацию входа как к отдельным элементам и секциям, так и к странице сайта в целом.
Чтобы добавить анимацию входа:
- Выберите соответствующий элемент, секцию или страницу.
- Нажмите на стрелку Открыть инспектор
в правом верхнем углу редактора.
- Перейдите во вкладку Анимация и эффекты
.
- Нажмите + Добавить в разделе Вход.
- Выберите анимацию из списка.
Совет: наведите курсор на анимацию, чтобы увидеть, как это работает. - (Необязательно) Нажмите Настроить анимацию внизу, чтобы настроить направление, задержку и длительность.
![GIF, показывающий, что при наведении курсора на типы анимации при выборе анимации отображается превью](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/35efb98d-035e-4131-b105-6f877f1c7817/a5933c94-c4d2-4e15-9481-a71dda4ebc37.gif)
Настройки анимации входа
После выбора анимации настройте ее так, как вы хотите. Выберите длительность анимации, настройте задержку, интенсивность и многое другое.
Чтобы настроить анимацию входа:
- Выберите соответствующий элемент, секцию или страницу.
- Нажмите на стрелку Открыть инспектор
в правом верхнем углу редактора.
- Перейдите во вкладку Анимация и эффекты
.
- Нажмите на анимацию, которую хотите изменить.
- Нажмите Настроить анимацию, чтобы изменить ее настройки:
- Направление: выберите направление анимации.
Совет: в зависимости от типа анимации вы можете установить направление в градусах (например, 180°) или выбрать вариант из раскрывающегося списка (например, слева, по часовой стрелке). - Длительность: измените продолжительность анимации.
- Задержка: установите промежуток времени между загрузкой страницы и запуском анимации.
- Переход: выберите постепенность появления и / или затухания анимации.
- Направление: выберите направление анимации.
Примечание:
Доступные параметры настройки зависят от выбранной анимации.
![Скриншот, показывающий доступные настройки при настройке анимации](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/4ca6fa9f-95b3-4e22-b290-9cfba81e6f06/4ab8c836-3baa-4c83-9ec8-5b31738ee563.png)
Удаление анимации входа
Вы можете в любое время удалить анимацию входа из панели инспектора.
Чтобы удалить анимацию входа:
- Выберите соответствующий элемент, секцию или страницу.
- Нажмите на стрелку Открыть инспектор
в правом верхнем углу редактора.
- Перейдите во вкладку Анимация и эффекты
.
- Наведите курсор на анимацию и нажмите значок Дополнительные действия
.
- Нажмите Удалить.
![Скриншот, показывающий как выбрать анимацию в панели Инспектора и удалить ее](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/baee781a-f6bd-47cc-9669-eb262748921f/8800fe3c-bb70-4e3e-bf91-23ae6e3002eb.png)