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