---
title: "Создайте экран-герой со скользящей шторкой"
description: "Разместите контент поверх полноэкранного изображения или видео."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

Экран-герой отображает изображение или видео от края до края в верхней части, а контент располагается на панели под ним. Чтобы создать такой экран, разместите весь контент на **Sliding sheet**, а герой будет находиться позади неё. Лист перекрывает нижнюю часть экрана и скользит вверх поверх героя при прокрутке.

## Разместите контент поверх фонового изображения или видео \{#lay-your-content-over-a-hero-image-or-video\}

1. Добавьте фоновое изображение на экран: в [настройках экрана](builder-ui#screen-settings-and-layout) установите **Fill** на [изображение или видео](paywall-head-picture). Шторка перекрывает нижнюю часть фона, поэтому выбирайте изображение или видео, где главный объект расположен ближе к верху.

2. Откройте панель **Add element** и выберите **Sliding sheet**.
3. Разместите содержимое экрана в sliding sheet — перетащите его на панели **Layers**.
4. Чтобы кнопка покупки оставалась на виду, добавьте её в [футер](#keep-the-purchase-button-in-view). Кнопка будет зафиксирована внизу экрана, пока содержимое прокручивается.
5. Настройте **Start position** шита, чтобы при открытии экрана было видно больше фонового изображения или больше контента.
6. Чтобы увидеть, как шит перемещается поверх фонового изображения, прокрутите экран в [области предпросмотра](builder-ui#preview-area-center).
7. Выберите другие модели из [списка устройств](builder-ui#view-controls-bottom-toolbar) и проверьте область выше шита. **Start position** задаётся в процентах от высоты экрана, поэтому на небольших телефонах эта область будет короче.

## Как шторка прокручивается поверх hero-блока \{#how-the-sheet-scrolls-over-the-hero\}

**Начальная позиция** — это позиция шторки при открытии экрана. По умолчанию 55%: шторка закрывает нижние 55% экрана, а пользователь видит hero-блок в верхних 45%.

Если весь контент виден при открытии экрана, шторка остаётся на начальной позиции. В противном случае пользователь прокручивает всю шторку вверх поверх hero-блока. Если контент выше экрана, верхняя часть шторки уходит за пределы видимости.

Чтобы высокое содержимое оставалось прокручиваемым, в [настройках экрана](paywall-layout-and-products#scroll) оставьте переключатель **Vertical scroll** включённым. Если выключить его, шторка зафиксируется в начальном положении и скроет всё содержимое, которое не помещается.

Пока шторка перемещается, пользователи видят следующее:

- Шторка выезжает поверх элементов за её пределами — например, логотипа или заголовка вверху экрана. Эти элементы тоже смещаются вверх, но медленнее, создавая эффект глубины (параллакс). На Android параллакс доступен в нативных Android- и React Native-приложениях с Adapty SDK v4.3.0 и выше. В других Android-приложениях или со старыми версиями SDK эффект не отображается.
- На iOS, когда пользователь тянет шторку ниже начального положения, элементы за её пределами растягиваются.
- Фон экрана не двигается.

### Добавьте параллакс к герою \{#add-parallax-to-the-hero\}

Чтобы добавить параллакс-эффект к герою, добавьте его как элемент изображения или видео вне шита, а не как фон экрана.

По умолчанию элемент не достигает краёв экрана. Отступы экрана добавляют поля со всех сторон, а при включённой **Safe area** элемент начинается ниже строки состояния.

1. Откройте панель **Add element** и перетащите элемент **Image** или **Video** в область над шитом.
2. Чтобы элемент доходил до шита, установите для него **Width** и **Height** значение **Fill**. Оставьте **Content mode** (**Aspect** для видео) в значении **Fill**.
3. Чтобы элемент доходил до левого и правого краёв экрана, откройте [настройки экрана](builder-ui#screen-settings-and-layout). В разделе **Spacing** установите левый и правый отступы равными 0. Если у шита прямые верхние углы, установите нижний отступ тоже равным 0, чтобы элемент касался шита.
4. Чтобы элемент доходил до верхнего края экрана под строкой состояния, оставьте его первым элементом снаружи шита. Затем нажмите на элемент и в разделе **Position** установите флажок **Ignore safe area**.

## Размещение элементов поверх hero-области \{#place-elements-over-the-hero\}

Чтобы разместить логотип или заголовок поверх фонового hero, перетащите элемент в область выше листа. Элементы вне листа располагаются стопкой от верхнего края экрана, а всё, что не помещается в эту область, обрезается. Чтобы разместить их поверх [изображения или видео](#add-parallax-to-the-hero), установите для них **Position** в значение **Absolute**.

Чтобы кнопка закрытия оставалась видимой при прокрутке, добавьте её непосредственно на экран и установите **Position** в значение **Fixed**. Выбрать **Fixed** для элемента внутри листа невозможно.

:::important
На Android элементы за пределами шторки с позиционированием **Relative** или **Absolute** реагируют на нажатия только в следующих приложениях:

- Нативных Android-приложениях с Adapty SDK v4.2.1 или новее
- React Native-приложениях с Adapty SDK v4.2.2 или новее

В остальных Android-приложениях размещайте кнопки и другие интерактивные элементы внутри шторки.
:::

## Держите кнопку покупки на виду \{#keep-the-purchase-button-in-view\}

Чтобы кнопка покупки и юридические ссылки оставались видимыми при прокрутке, поместите их в [футер](builder-containers#footer). Футер размещается внутри листа.

Футер фиксируется в нижней части экрана поверх листа. Пользователи могут прокрутить весь контент листа и увидеть его над футером.

Футер на корневом уровне экрана выглядит так же, как и внутри листа.

## Оформление шторки \{#style-the-sheet\}

Шторка стилизуется как любой другой контейнер. Отступы и скругления работают иначе:

- **Отступы экрана**: Отступы экрана распространяются только на элементы за пределами шторки, поэтому шторка растягивается от края до края.
- **Отступы элемента**: **Padding** шторки не позволяет её содержимому упираться в края экрана.
- **Углы**: Закруглённые верхние углы приподнимают шторку над начальным положением на величину радиуса скругления, поэтому в них виден фон героя. Шторка с видеозаливкой не приподнимается, поэтому в её углах отображается фон экрана. Полупрозрачная шторка приподнимается только над фоном экрана, залитым одним сплошным цветом.

## Sliding sheet и Bottom Sheet \{#sliding-sheet-vs-bottom-sheet\}

Оба элемента занимают нижнюю часть экрана. Выберите тот, который подходит под вашу задачу:

- **Используйте Sliding sheet**, чтобы разместить основной контент экрана поверх фонового изображения. Шторка видна при открытии экрана и перемещается только при прокрутке.
- **Используйте [Bottom Sheet](builder-containers#bottom-sheet)** для контента, который появляется по запросу, — например, список тарифов по ссылке **Show all plans**. Он раскрывается с помощью действия **Show**.