Редактор Wix: добавление и настройка анимации
4 мин.
Используйте анимацию, чтобы оживить сайт. Мы предлагаем различные анимации для любого аспекта вашего дизайна - появление, прокрутка, зацикливание и даже эффекты мыши.
Вы можете настроить анимацию по своему желанию. Например, настройте расстояние, продолжительность, задержку и многое другое. Наши мобильные анимации подходят для небольших экранов, поэтому вы можете удивить своих посетителей на любом устройстве.
К одному элементу можно применять разные анимации и эффекты.
Проблемы с анимацией?
Следуйте нашим инструкциям, чтобы убедиться, что анимация работает должным образом на вашем сайте.
Добавление анимации к элементу
Сделайте сайт динамичным и увлекательным, добавив анимацию к элементам. Каждая анимация имеет свой собственный эффект, вы можете смешивать их с разными элементами и производить на посетителей неизгладимое впечатление.
Совет:
Вы можете добавить анимацию к группе элементов, выбрав группу и нажав значок Анимация 
.
.Чтобы добавить анимацию:
- Нажмите на нужный элемент в редакторе.
- Нажмите значок Анимация .
- Выберите эффект.
- Появление: анимация воспроизводится один раз при появлении на экране выбранного элемента.
- Зацикленный повтор: анимация воспроизводится непрерывно по кругу.
- Прокрутка: анимация воспроизводится при прокрутке во время появления элемента.
- Движение и эффекты: анимация начинает перемещаться, когда курсор посетителя наводит курсор на элемент.
Примечание
Элементы в хедере будут анимироваться только один раз, при первом посещении страницы.
Настройка анимации
После добавления анимации к элементу настройте ее так, как вы хотите, чтобы она соответствовала стилю сайта.
Отрегулируйте настройки, такие как направление, длительность и задержка, чтобы привлечь внимание посетителей.
Примечание
Доступные параметры настройки зависят от выбранной анимации.
Чтобы настроить анимацию:
- Нажмите на нужный элемент в редакторе.
- Нажмите значок Анимация .
- Нажмите Настроить и используйте параметры для настройки анимации:
- Интенсивность: нажмите на раскрывающееся список и выберите, насколько интенсивной будет анимация при воспроизведении.
- Направление: выберите направление появления анимации (например, по часовой стрелке или с правой стороны).
- Расстояние: используйте ползунок, чтобы изменить расстояние между начальной и конечной точкой воспроизведения анимационного эффекта.
- Длительность: используйте ползунок, чтобы настроить продолжительность воспроизведения анимации.
- Задержка: перетащите ползунок, чтобы увеличить или уменьшить задержку между загрузкой страницы и началом анимации.
- Скорость: перетащите ползунок, чтобы изменить скорость эффекта - чем меньше число, тем быстрее эффект.
- Ось движения: выберите перемещение элемента по горизонтали, вертикали или по обеим осям.
- Тип анимации: выберите тип появления или повторения анимации при прокрутке.
- Поворот: выберите точку отсчета, из которой элемент начнет перемещаться.
- Движение: выберите интенсивность движения, например, плавное или умеренное.
Совет по обеспечению доступности:
Если этот элемент является декоративным, то есть он не включает важную информацию для программ чтения с экрана, установите флажок Оформление в Настройках 
.
.Добавление анимации в мобильной версии сайта
Помимо добавления анимации к элементам на компьютере, вы также можете добавить их на свой мобильный сайт, чтобы ваши посетители видели потрясающие страницы на всех устройствах.
Анимация для мобильных устройств была разработана специально для экранов небольших размеров, поэтому вам не нужно беспокоиться об интервалах.
Примечание
Эффекты анимации, которые вы добавляете в компьютерной версии, не отображаются на мобильной, поскольку они изначально оптимизированы для разных размеров экранов. Если вы хотите, чтобы анимация элемента срабатывала и на мобильной версии сайта, выполните действия, перечисленные ниже.
Чтобы добавить анимацию в мобильной версии сайта:
- Перейдите в мобильный редактор.
- Нажмите на нужный элемент.
- Нажмите значок Анимация .
- Выберите эффект.
Важное примечание для Velo:
Если вы используете Velo (код) для скрытия или отображения элемента, его анимацию также необходимо настроить через Velo.