Редактор Wix Studio: Добавление эффектов мыши
4 мин. чтения
Повысьте интерактивность дизайна с помощью увлекательных эффектов мыши. Добавьте эффект мыши к элементу, который хотите выделить - движение курсора посетителя активирует его автоматически. Мы предлагаем множество различных эффектов, которые вы можете настроить на сайтах ваших клиентов, такие как те, что изображены ниже.
![Примеры различных эффектов для мыши, которые вы можете добавить к элементу в редакторе Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/04/e82d136c-563d-4ab1-834a-54c036f493c4/30f1b516-5844-4656-ae31-fe8c704306cc.gif)
Содержание:
Примечание:
Эффекты мыши требуют использование курсора, поэтому они не будут воспроизводиться на устройствах с сенсорным экраном (например, на мобильных телефонах, планшетах и т. д.).
Добавление эффекта мыши к элементу
Выберите элемент, к которому хотите добавить анимацию и откройте панель инспектора, чтобы выбрать один из эффектов мыши.
Чтобы добавить эффект мыши:
- Выберите соответствующий элемент.
- Нажмите на значок Открыть инспектор
в правом верхнем углу редактора.
- Перейдите во вкладку Анимация и эффекты
.
- Нажмите Эффекты мыши, затем нажмите + Добавить.
- Выберите эффект из коллекции.
- (Необязательно) Нажмите Настроить анимацию внизу, чтобы настроить такие параметры, как направление, расстояние и переход.
![Предпросмотр эффектов мыши в панели Инспектора в редакторе Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/04/8f7ef84d-f0d0-4306-8e33-0aa5bd4b7f4c/b10d634a-51e0-47f9-b9e9-bf8d7e201162.gif)
Настройка эффекта мыши
Выбрав эффект мыши, настройте его так, как вам нужно. Сделайте эффект более уточненным или заметным, выбрав такие настройки, как расстояние, направление, скорость, переход и другие.
Примечание:
Доступные параметры настройки зависят от выбранного вами эффекта.
Чтобы настроить эффект мыши:
- Выберите соответствующий элемент.
- Нажмите на значок Открыть инспектор
в правом верхнем углу редактора.
- Перейдите во вкладку Анимация и эффекты
.
- Нажмите на эффект в разделе Эффекты мыши, чтобы отредактировать.
- Нажмите Настроить анимацию , чтобы изменить настройки:
- Направление: выберите, следует ли эффект направлению мыши.
- По направлению движения мыши: элемент следует за перемещением курсора мыши.
- Против движения мыши: элемент перемещается в направлении, противоположном курсору. Например, если курсор перемещается вверх, элемент перемещается вниз.
- Расстояние: настройте расстояние смещения элемента (в пикс., %, vh или vw).
- Скорость: перетащите ползунок, чтобы изменить скорость эффекта - чем меньше число, тем быстрее эффект.
- Ось движения: выберите перемещение элемента по горизонтали, вертикали или по обеим осям.
- Переход: выберите постепенность появления и / или затухания эффекта.
- Перспектива: выберите расстояние между элементом и курсором посетителя. В отличие от высокого значения, низкое значение приведет к более интенсивному 3D-эффекту.
- Направление: выберите, следует ли эффект направлению мыши.
Совет:
Активируйте переключатель Для превью подвигайте, чтобы увидеть эффект прямо на холсте, без необходимости просматривать сайт в режиме предпросмотра.
![Настройка эффекта мыши в панели инспектора в редакторе Studio](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/04/570f1bfb-5eb4-466c-9571-1ac4852081b7/b8f43589-52aa-49ce-9a80-14360e3aac0f.png)
Удаление эффекта мыши
Вы можете в любое время удалить эффект мыши из панели инспектора.
Чтобы удалить эффект мыши:
- Выберите соответствующий элемент.
- Нажмите на значок Открыть инспектор
в правом верхнем углу редактора.
- Перейдите во вкладку Анимация и эффекты
.
- Нажмите на эффект под Эффекты мыши.
- Выберите Нет.
![Удаление эффекта мыши, выбрав его](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/02/04/19382b33-0295-4f33-bdc8-91b075b25f05/93a4adc6-d0fe-4c75-93e0-d5b9a5d41d35.gif)