Редактор Wix: добавление и настройка анимации

4 мин. чтения
Оживите сайт с помощью анимации. Добавьте эффекты, такие как «Наплыв» или «Увеличение», чтобы создать оригинальные, яркие страницы. Вы можете выбрать, как и когда воспроизводить анимацию - только один раз, при прокрутке, в зацикленном повторе и т. д. 
Вы можете применять анимацию к различным элементам, а также применять различные эффекты к одному и тому же элементу как на компьютерной, так и на мобильной версии сайта. Анимация на мобильном сайте настроена так, чтобы соответствовать экранам меньшего размера, поэтому вы сможете и дальше удивлять посетителей на экранах всех устройств. 
GIF, показывающий различную анимацию изображений при прокрутке сайта.
Содержание:
Проблемы с анимацией?
Следуйте нашим инструкциям, чтобы настроить корректную работу анимации на опубликованном сайте.

Добавление анимации к элементу

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

Чтобы добавить анимацию:

  1. Нажмите на нужный элемент в редакторе.
  2. Нажмите значок Анимация .
  3. Выберите эффект.
    • Появление: анимация воспроизводится один раз при появлении на экране выбранного элемента.
    • Зацикленный повтор: анимация воспроизводится непрерывно по кругу.
    • Прокрутка: анимация воспроизводится при прокрутке во время появления элемента. 
GIF, показывающий ряд различных анимаций, которые можно отобразить при зацикленном повторе.
Примечание
Элементы в хедере будут анимироваться только один раз, при первом посещении страницы.

Настройка анимации

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

Чтобы настроить анимацию:

  1. Нажмите на нужный элемент в редакторе.
  2. Нажмите значок Анимация .
  3. Нажмите Настроить и используйте параметры для настройки анимации:
    • Интенсивность: нажмите на раскрывающееся список и выберите, насколько интенсивной будет анимация при воспроизведении.
    • Направление:  выберите направление появления анимации (например, по часовой стрелке или с правой стороны).
    • Расстояние: используйте ползунок, чтобы изменить расстояние между начальной и конечной точкой воспроизведения анимационного эффекта.
    • Длительность: используйте ползунок, чтобы настроить продолжительность воспроизведения анимации.
    • Задержка: перетащите ползунок, чтобы увеличить или уменьшить задержку между загрузкой страницы и началом анимации.
    • Тип анимации: выберите тип появления или повторения анимации при прокрутке. 
    • Стиль движения: выберите интенсивность движения, например, плавное или умеренное.
Скриншот с настройками анимации отражения. Отображение различных настроек, таких как направление и продолжительность анимации.

Добавление анимации в мобильной версии сайта

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

Чтобы добавить анимацию в мобильной версии сайта:

  1. Перейдите в мобильный редактор.
  2. Нажмите на нужный элемент.
  3. Нажмите значок Анимация  .
  4. Выберите эффект.
Выбор анимации для элемента в мобильном редакторе
Важное примечание для Velo:
Если вы используете Velo (код) для скрытия или отображения элемента, его анимацию также необходимо настроить через Velo. 

Была ли статья полезна?

|