Как сделать параллакс фонового изображения

Отвечаем на вопрос: как сделать параллакс фонового изображения в Taptop? Какие настройки нужно применить для создания красивого эффекта? Разбираемся!

Смотрите видео:

https://vk.com/video-219751701_456239279

VK Видео | YouTube | Rutube

Параллакс — это эффект, при котором объекты движутся с разной скоростью во время прокрутки страницы. Фоновое изображение движется медленнее основного контента, создавая объемный визуальный эффект.

Сделаем параллакс-эффект на примере вот такой секции с фоновым изображением.

Пошаговая инструкция по созданию параллакса

Чтобы создать параллакс, нужно заменить фоновое изображение секции на виджет Image и настроить ему анимацию по скроллу.

Шаг 1: Подготовьте секцию

Если у вашей секции уже установлено фоновое изображение:

1. Выберите секцию с фоновым изображением на холсте или в слоях.
2. Удалите фоновое изображение в стилях секции: на вкладке Дизайн в разделе Внешний вид → Фон нажмите «–» рядом с Background Image.

Это необходимо, поскольку для параллакса мы будем использовать виджет Image, а не стандартный фон секции.

Шаг 2: Добавьте виджет Image

1. Перетащите виджет Image в секцию.
2. Оберните виджет в Div-блок, используя сочетание клавиш Shift+A.

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

Шаг 3: Настройте Div-блок (обертку для Image)

Настройте Div-блок для правильного позиционирования:

• Размещение: переместите Div-блок в самый верх секции, перетащив его мышкой в слоях или используя стрелку вверх на клавиатуре.
• Размеры: установите ширину и высоту 100%.

• Отступы: уберите все дефолтные отступы, установив их значения равным 0.

• Позиционирование: выберите Абсолютное и установите отступы со всех сторон 0 (top, right, bottom, left).

Эти настройки позволят Div-блоку заполнить всю секцию без выхода за ее границы.

Шаг 4: Настройте виджет Image

1. Выберите изображение для виджета Image: кликните два раза на Image и затем кликните на нужное изображение в левой панели.

2. Установите размеры: ширина и высота 100%.

Это позволит изображению заполнить весь Div-блок. Теперь изображение покрывает всю секцию.

Шаг 5: Настройте переполнение секции

В стилях секции установите Overflow: Hidden: на вкладке Дизайн в разделе Внешний вид → Переполнение нажмите на иконку зачеркнутого глаза. Это нужно, чтобы картинка не выходила за пределы секции во время анимации.

Шаг 6: Создайте анимацию для Image

Добавьте анимацию к виджету Image:

1. Выберите Image, перейдите на правой панели на вкладку Анимации и нажмите «+».

2. Выберите тип триггера: Трансформация по скроллу.

3. В настройках анимации:
   • Удалите дефолтный эффект Непрозрачность, нажав на три точки → Удалить.

• Добавьте эффект Движение, нажав на «+».

• Откройте параметры эффекта и добавьте значения по оси Y: Начало: 0%, Конец: 60%.

Шаг 7: Настройте триггер анимации

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

• Нажмите на иконку прицела в параметре Триггерный элемент.

• Выберите нужную секцию на холсте или в слоях и нажмите кнопку Подтвердить.

Шаг 8: Дополнительные настройки (опционально)

Для более точной настройки эффекта установите:

• Смещение триггера: 40% — для более позднего старта анимации.
• Сглаживание: 2 секунды — для более плавного эффекта.

Резюме

Чтобы создать параллакс фонового изображения

1. Замените фоновое изображение секции на виджет Image, обернутый в Div-блок.
2. Настройте размеры и позиционирование Div-блока, чтобы он занимал всю секцию.
3. Добавьте изображение в Image и установите его размеры 100%.
4. Создайте анимацию трансформации по скроллу для Image, настроив движение по оси Y.
5. Установите триггером следующую секцию.