Редактор Studio: добавление эффекта WebGL для фона медиа

8 мин.

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

GIF-файл, демонстрирующий опубликованный сайт с WebGL-анимацией на фоне нескольких секций.

Добавление эффекта WebGL

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

Примечание:

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

Чтобы добавить эффект WebGL:

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

Совет:

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

GIF-файл, демонстрирующий превью доступных пресетов WebGL-анимации в панели инспектора.

Настройка эффекта WebGL

Настройте эффекты WebGL, чтобы доработать их внешний вид и поведение, добавляете ли вы едва заметные искажения или смелое динамичное движение. Каждый эффект имеет свой собственный набор регулируемых настроек, таких как интенсивность, скорость и направление, что дает вам полный контроль над тем, как он взаимодействует с контентом.

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

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

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

След с шумом

Пластика

Slitscan

RGB-шар

Водная рябь

RGB-сплит

Примечание: доступные настройки могут меняться в зависимости от выбранных триггеров.

Триггер: выберите один или несколько триггеров для активации эффекта — автовоспроизведение, движение курсора или прокрутка. Добавьте триггеры, нажав на иконку Добавьте , и удалите триггер, нажав на иконку Удалить рядом с ним.
Цвета: выберите цвета, которые создают эффект разделения — Все, Зеленый и Пурпурный и т. д. Эти цвета отображаются в виде фрагментированных слоев поверх фона раздела.
Смещение каналов: перетащите ползунок, чтобы отрегулировать выравнивание цветовых каналов. Увеличение смещения разделяет и размывает цвета, создавая более интенсивный и психоделический эффект.
Угол: перетащите ползунок, чтобы установить угол, под которым цвета вращаются внутри эффекта.
Размер курсора: перетащите ползунок, чтобы изменить область, которая реагирует на эффект, когда посетитель наводит курсор на фон раздела. Увеличение области делает эффект более заметным, а уменьшение — более сфокусированным.
Шум: перетащите ползунок, чтобы настроить уровень шума. Увеличение шума делает эффект более текстурированным и искаженным.
Скорость курсора: перетащите ползунок, чтобы настроить скорость, с которой движение следует за курсором, когда посетитель наводит его на фон раздела.
Скорость автовоспроизведения: перетащите ползунок, чтобы настроить скорость движения цветов.