Редактор Studio: об анимации
4 мин.
Использование наших анимаций в ваших дизайнах может вывести их на новый уровень. Редактор Studio предлагает 5 различных типов анимации в зависимости от того, когда вы хотите, чтобы они появились.
Настройте появление анимации, когда посетители наводят курсор, кликают или прокручивают страницу мимо элемента. Вы также можете добавить анимацию появления при первой загрузке элемента или зацикленный повтор — и все это без единой строчки кода.
Примечание:
Размер анимации рассчитывается в соответствии с параметрами браузера при первой загрузке страницы. Если изменить размер окна браузера (потянув за его края), анимация может отображаться некорректно. Мы рекомендуем обновить страницу для оптимального отображения.
Анимация появления
Добавление анимации появления для элемента — отличный способ привлечь к нему внимание посетителей. Анимация воспроизводится, когда элемент впервые попадает в поле зрения, поэтому она мгновенно бросается в глаза. Вы можете выбрать один из множества типов и настроить его в соответствии с потребностями клиента.

Взаимодействия при наведении и клике
Добавьте классные эффекты, которые появляются, когда посетители наводят курсор или кликают на элемент. Вы можете заставить элементы трансформироваться, перемещаться или раскрывать новый контент при наведении или клике.
Выбирайте из множества готовых эффектов или создайте собственный эффект по своим параметрам. Управляйте временем, порядком и плавностью, чтобы объединить все элементы, а затем посмотрите результат прямо в редакторе.
Вы также можете создавать взаимодействия между элементами, чтобы при наведении или клике на один элемент запускалась анимация другого.
В примере ниже наведение курсора на абзац служит триггером для движения кнопки и изображения.

Анимация при прокрутке
Повышайте взаимодействие и создавайте интересные эффекты с помощью анимации прокрутки. Прогресс анимации напрямую связан с положением прокрутки: она воспроизводится вперед и назад, когда посетители прокручивают страницу вверх и вниз.
Вы также можете создавать взаимодействия между элементами, чтобы при прокрутке одного элемента запускалась анимация другого.
В примере ниже при прокрутке мимо заголовка для репитера срабатывает эффект Grow.

Зацикленная анимация
Создайте ощущение движения в вашем дизайне с помощью анимаций с зацикленным повтором. Вы можете добавить зацикленный повтор к любому элементу, который должны заметить посетители: некоторые из них более тонкие, а другие по-настоящему привлекают внимание.

Эффекты WebGL для медиафонов
Преобразите проекты клиентов с помощью наших эффектов WebGL, которые превратят медиафоны в нечто впечатляющее. Эти эффекты привлекают посетителей сайта и обеспечивают оптимальную производительность. Выбирайте из множества впечатляющих пресетов, настраивайте их характеристики и выбирайте способ активации: автоматически при прокрутке или при движении курсора посетителя.

Часто задаваемые вопросы
Выберите вопрос, чтобы узнать больше об эффектах анимации.
К каким элементам можно добавить анимацию?
С чего начать?
Можно ли анимировать элементы, связанные с приложениями Wix?
Может ли один элемент иметь несколько анимаций?
Как объединить анимации для одного элемента?
Как работает переопределение анимации для разных размеров экрана?


в правом верхнем углу редактора.
, чтобы приступить к настройке нужного типа анимации.