Центр поддержки Wix
    Главная
  1. Wix Специалисты и Корпоративные решения Wix
  2. Wix Studio
  3. Использование Редактора Wix Studio
  4. Добавление эффектов и анимаций
    5. Редактор Studio: добавление пресета эффекта взаимодействия клика или наведения

Редактор Studio: добавление пресета эффекта взаимодействия клика или наведения

5 мин. чтения
Добавьте эффекты взаимодействия, чтобы создать анимацию при клике или наведении курсора на элементы. Нужна быстрая и легкая анимация? Используйте один из наших пресетов (например, увеличение, отклонение, исчезновение) и настройте его по своему вкусу.
Взаимодействие может анимировать тот же элемент, на который посетители нажимают или наводят курсор, или другой элемент на странице. В любом случае у вас есть полный контроль над внешним видом, ощущениями и временем, поэтому это действительно эффективно. 
GIF, показывающий, как выглядят взаимодействия на опубликованном сайте.

Шаг 1 | Добавьте триггер (Клик или Наведение)

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

Чтобы добавить триггер:

  1. Выберите элемент, который должен запускать эффект взаимодействия.
  2. Нажмите на значок Открыть инспектор  в правом верхнем углу редактора.
Скриншот открытия панели инспектора в редакторе Studio.
  1. Перейдите во вкладку Анимация и эффекты .
  2. Выберите Наведение / Клик.
  3. Нажмите + Добавить. 
Вкладка «Анимация и эффекты» в панели инспектора, добавление новой анимации при наведении

Шаг 2 | Настройте эффект

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

Чтобы настроить эффект:

  1. (В панели настроек) Выберите, что происходит При наведении / По клику:
    • Начать анимацию: нажатие / наведение курсора на элемент запускает выбранную анимацию.
    • Сброс анимации: нажатие / наведение курсора на элемент удаляет любую анимацию, которая была применена ранее.
    • Включение / выключение: клик по элементу запускает анимацию, а второй клик удаляет ее.
      Примечание: этот параметр доступен только для взаимодействий с кликом.
  2. Выберите Элемент с анимацией:
    • Сделайте так, чтобы элемент запускал свою собственную анимацию: нажмите на название элемента (рядом с ним отобразится слово (сам элемент)).
    • Добавьте анимацию к другому элементу на странице: выберите элемент из раскрывающегося списка или нажмите Выбрать на холсте, чтобы выбрать его на странице.
      Совет: удерживайте клавишу Cmd / Ctrl, чтобы выбрать дочерний элемент.
  3. Выберите анимацию:
    1. Перейдите во вкладку Пресеты. 
    2. Выберите анимацию из списка.
GIF, показывающий, что при наведении курсора на пресет эффекта отображается превью.
Совет:
Установив отображение элемента при нажатии или наведении, он отобразится на холсте в виде клетчатого наложения. Это указывает на то, что элемент изначально прозрачен. 
Кнопка, появляющаяся в форме клетчатого наложения на холсте при наведении курсора в редакторе Studio
Эту индикацию можно отключить в любой момент. Нажмите значок Wix Studio , наведите курсор на Вид и нажмите Прозрачные элементы.

Шаг 3 | (Необязательно) Настройте анимацию

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

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

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

Часто задаваемые вопросы

Нажмите ниже, чтобы узнать подробнее о создании эффектов. 

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

|
В этой статье
  • Шаг 1 | Добавьте триггер (Клик или Наведение)
  • Шаг 2 | Настройте эффект
  • Шаг 3 | (Необязательно) Настройте анимацию
  • Часто задаваемые вопросы