Компонент "Параллакс" помогает создать иллюзию глубины с помощью слоев изображений. Когда пользователь прокручивает страницу вверх или вниз на мобильном устройстве, изображения переднего плана и фона двигаются с разной скоростью.
Этот компонент поддерживается только в объявлениях с эффектом параллакса для Дисплея и Видео 360.
Как добавить в проект компонент "Параллакс"
- Откройте панель Компоненты, а затем – папку Взаимодействие.
- Перетащите компонент Параллакс
в рабочую область.
- Дважды нажмите на него, чтобы войти в режим редактирования компонентов.
- Добавьте слои: перетащите графические файлы из файловой системы в рабочую область или на панель Слои (только для Windows или Mac). Также можно нажать кнопку Добавить изображения
в нижней части панели Слои. В качестве слоев могут быть добавлены только изображения.
- Поместите каждый слой там, где он должен быть в начале и в конце анимации, используя вкладки Начало и Конец. Для этого можно перетаскивать слои или использовать поля положения Начало и Конец на панели Свойства. Также можно добавить середину анимации, наведя указатель справа от вкладки Начало и нажав кнопку
.
- При необходимости задайте дополнительные параметры настройки.
- Когда компонент будет полностью настроен (его можно просматривать в ходе работы), нажмите Сохранить. Google Web Designer вернется к обычному интерфейсу.
в нижней части панели Слои. В качестве слоев могут быть добавлены только изображения.
.Параметры настройки
Чтобы настроить компонент, дважды нажмите в рабочей области или выберите его и нажмите Настройки… на панели Свойства.
Как добавить слои
Слои можно добавлять двумя способами:
- Перетащить файл из файловой системы (только для Windows или Mac) или библиотеки в рабочую область или на панель Слои.
- Нажать кнопку Добавить изображения
Слои в компоненте "Параллакс" должны быть изображениями.
Как перемещать слои
- Выберите слой, который необходимо переместить.
- Выберите вкладку Начало, Середина или Конец. Также можно добавить середину анимации, если вы ещё этого не сделали.
- Переместите слой одним из следующих способов:
- Перетащите его в новое положение.
- Используйте клавиши со стрелками, чтобы перемещать слой с шагом в один пиксель. Чтобы увеличить шаг до 10 пикселей, удерживайте клавишу Shift.
- Задайте свойства положения Начало, Середина или Конец на вкладке Свойства слоя. На вкладке можно редактировать только соответствующие ей свойства. Чтобы скопировать другое положение, используйте кнопки Сопоставить с начальным положением, Сопоставить со средним положением илиСопоставить с конечным положением
.
Переключитесь на другую вкладку, чтобы отрегулировать положение слоя в другой точке анимации.
Как заменить изображения
- Нажмите правой кнопкой мыши на изображение, которое нужно заменить, и во всплывающем меню выберите Поменять изображение.
- Выберите изображение из библиотеки объектов или нажмите кнопку Импорт файлов
Новое изображение заменит исходное. Если вы изменяли размер исходного изображения, этот размер будет применен и к новому. В ином случае размер нового изображения не изменится.
Как изменить порядок слоев
На панели Слои перетащите слой на новое место в списке.
Порядок слоев определяет, какой слой показывается на переднем плане, какой – за ним и т. д. Слои вверху списка отображаются ближе к переднему плану, чем те, которые указаны ниже.
Как удалить слой
- Выберите слой, который нужно удалить.
- Нажмите кнопку Удалить
в нижней части панели Слои или клавишу Delete.
Как изменить размер слоя
- Выберите слой, размер которого необходимо изменить.
- На панели Свойства слоя задайте ширину и высоту слоя в пикселях.
- Нажмите кнопку Сохранять соотношение сторон
, чтобы включить или выключить сохранение пропорций между шириной и высотой.
- Нажмите кнопку Сохранять соотношение сторон
Слой масштабируется до указанного размера и сохраняет его на протяжении всей анимации.
Как изменить прозрачность слоя
- Выберите слой, который необходимо изменить.
- На панели Свойства слоя задайте его прозрачность в начале и в конце анимации числом от 0 до 1 (0 – прозрачный, 1 – непрозрачный).
Как изменить динамику анимации слоя
- Выберите слой, который необходимо изменить.
- На панели Свойства слоя из раскрывающегося списка Динамика выберите тип динамики.
Настраиваемая динамика недоступна.
Как добавить середину анимации
Чтобы дополнительно настроить анимацию компонента "Параллакс", можно добавить середину анимации и изменить свойства слоя в этой точке.
- Наведите указатель справа от вкладки Началои нажмите кнопку
- По умолчанию середина анимации показывается между началом и концом анимации. Также можно настроить продолжительность анимации.
- Переключитесь на вкладку Середина, чтобы настроить свойства слоя в этой точке.
Чтобы удалить середину анимации, наведите указатель справа от вкладки Середина и нажмите X.
Как изменить продолжительность анимации
Продолжительность анимации компонента "Параллакс" зависит от того, какая его часть показывается на странице при прокрутке. По умолчанию анимация начинается, когда верхний край компонента начинает появляться на странице (0 %), и заканчивается, когда нижний край исчезает с верхней части страницы (100 %). Если вы добавили середину анимации, можно также настроить, когда она показывается во время анимации. Продолжительность анимации можно настроить двумя способами:
- На панели Продолжительность анимации задайте нужные проценты, перетащив значки или ползунки начала, середины и окончания.
- Введите проценты начала, середины и окончания в поля на панели Продолжительность анимации.
Как скрыть или показать слои
На панели Слои установите флажок рядом с уменьшенным изображением слоя (под кнопкой Скрыть все слои ).
Чтобы скрыть или показать все слои, нажимайте кнопку Скрыть все слои .
Скрытие слоя облегчает работу с другими слоями: он не показывается в предварительном просмотре во время настройки, но виден при просмотре в браузере и в опубликованном объявлении.
Как скрыть и отобразить образы
- Выберите слой.
- На панели Свойства слоя в разделе Дополнительные свойства нажмите на переключатель Показать скрытые.
Образы – это полупрозрачные версии слоя во всех положениях, которые в данный момент не редактируются. Они используются для наглядного сравнения начального и конечного положений. Образы нужны только при редактировании и не будут показываться в предварительном просмотре или в опубликованном файле.
Свойства
Свойства компонента
Свойства компонента отображаются на панели "Свойства" (для этого нужно выйти из режима редактирования компонентов).
| Свойство | Описание |
|---|---|
| Название | Название компонента "Параллакс". |
| Коэффициент прокрутки | Число от 0 до 1, которое обозначает степень прокрутки пользователем. Используется только в рабочей области Google Web Designer. Значение по умолчанию – 0,5. |
Свойства слоя
Свойства слоя можно просматривать и редактировать в режиме редактирования компонентов.
| Свойство | Описание |
|---|---|
| Название | Название слоя (нельзя изменить). |
|
Начало |
Расстояние до слоя в пикселях или процентах от левого и верхнего края компонента при входе компонента в поле зрения (когда его верхний край находится внизу области просмотра). Можно редактировать, когда выбрана вкладка Начало. |
| Середина | Расстояние до слоя в пикселях или процентах от левого и верхнего края компонента в середине анимации. Можно редактировать, когда выбрана вкладка Середина. |
| Конец | Расстояние до слоя в пикселях или процентах от левого и верхнего края компонента при выходе компонента из поля зрения (когда его нижний край находится вверху области просмотра). Можно редактировать, когда выбрана вкладка Окончание. |
| Размер | Ширина и высота слоя. Применяется к слою в течение всего периода анимации. |
| Прозрачность | Прозрачность слоя в начале и в конце анимации. Обозначается числом от 0 (прозрачный) до 1 (непрозрачный). |
| Динамика | Тип динамики анимации слоя. Настраиваемая динамика недоступна. |
| Показать скрытые | Если этот параметр включен, показывается полупрозрачная версия слоя в неактивных положениях (которые пока нельзя изменить). |
События
С помощью событий можно инициировать другие действия в объявлении. Компонент "Параллакс" отправляет событие, указанное ниже.
| Событие | Описание |
|---|---|
| Компонент "Параллакс" загружен | Отправляется, когда компонент готов к отображению. |
Предварительный просмотр
Во время настройки
Компонент "Параллакс" можно просматривать во время работы над ним. Для этого выполните следующие действия:
- Чтобы войти в режим редактирования компонентов, дважды нажмите на компонент в рабочей области.
- Перейдите на вкладку Предварительный просмотр вверху.
- Прокрутите страницу вверх и вниз, чтобы увидеть, как видимые слои показываются в тестовом макете мобильного устройства (скрытые слои не показываются).
- Во время предпросмотра компоненты нельзя редактировать. Перейдите на вкладку Начало, Середина или Конец, внесите изменения и вернитесь на вкладку Предпросмотр, чтобы просмотреть их.
В браузере
Чтобы просмотреть компонент в браузере, в Google Web Designer выйдите из режима редактирования компонента и нажмите кнопку Предпросмотр. На странице предпросмотра объявление показывается с достаточным количеством контента для того, чтобы прокрутить компонент вверх и вниз.
Доступны следующие параметры режима предпросмотра:
- Устройство. Выберите мобильное устройство или укажите другое.
- Повернуть устройство
. Выберите вертикальную или горизонтальную ориентацию.
- Размер области просмотра. Если для устройства выбран вариант Особое, можно задать новый размер, указав значение в этом поле или перетаскивая маркеры изменения размера.
. Выберите вертикальную или горизонтальную ориентацию.В объявлениях с компонентом "Параллакс" всегда используется режим предварительного просмотра "Параллакс".