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

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

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

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

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

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

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

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

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

Выберите секцию с фоновым изображением на холсте или в слоях.

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

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

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

Перетащите виджет Image в секцию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В настройках анимации:

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

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

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

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

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

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

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

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

Смещение триггера: 40% — для более позднего старта анимации.

Сглаживание: 2 секунды — для более плавного эффекта.

Резюме

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

Замените фоновое изображение секции на виджет Image, обернутый в Div-блок.

Настройте размеры и позиционирование Div-блока, чтобы он занимал всю секцию.

Добавьте изображение в Image и установите его размеры 100%.

Создайте анимацию трансформации по скроллу для Image, настроив движение по оси Y.

Установите триггером следующую секцию.