---
contractVersion: 1
title: Демонстрация движения и глубины
description: Демонстрация прокручиваемых сцен, появления и каскадного движения элементов, глубины, наклона и режима уменьшенного движения.
language: ru
---

# Движение ведёт рассказ

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

::::actions{placement="inline"}
::action[Открыть первую сцену]{href="#opening" kind="primary" effect="magnetic"}
::action[Посмотреть ленту изображений]{href="#rail" kind="secondary"}
::action[Проверить режим без движения]{href="#fallback" kind="quiet"}
::::

:::::section{title="Глубина следует за вниманием" id="opening" nav="Глубина" recipe="hero" scene="none" interaction="depth"}
:::lead
При прокрутке меняется взаимное положение изображения и рамки. Мышь или трекпад добавляют глубину, но
читать страницу и переходить по ней можно и без этого эффекта.
:::

![Зелёное полярное сияние над краем Земли, снятое с Международной космической станции](assets/aurora-station.jpg)

:::callout{kind="info" title="Двигайте указатель, прокручивайте или просто читайте"}
Пакет задаёт границы эффекта и отвечает за вариант без движения. В исходнике остаётся обычный Markdown.
:::
:::::

:::::section{title="Непрерывная лента остаётся внутри контейнера" id="rail" nav="Лента" recipe="rail" scene="progress"}
::::cards
:::card{title="Минеральный свет"}
![Концентрические кольца структуры Ришат в пустыне Мавритании, снятые с орбиты](assets/richat.jpg)
:::
:::card{title="Ночной рельеф"}
![Дым факела над скважиной тянется поперёк гряд дюн песчаного моря Каланшо, вид с орбиты](assets/sand-sea.jpg)
:::
:::card{title="Дальний сигнал"}
![Ночная Москва со станции, над горизонтом — зелёная линия сияния и Луна](assets/night-moscow.jpg)
:::
::::
:::::

:::::section{title="Последовательность упрощает просмотр доказательств" id="sequence" nav="Последовательность" recipe="metrics"}
::::cards
:::card{title="Появление"}
Раздел входит в кадр, когда становится нужен.
:::
:::card{title="Каскад"}
Связанные элементы появляются в авторском порядке.
:::
:::card{title="Прогресс"}
Глубина сцены следует за положением страницы при прокрутке.
:::
:::card{title="Указатель"}
Реакция на мышь или трекпад действует только внутри элемента и обновляется не чаще одного кадра.
:::
::::
:::::

:::::section{title="Одна картинка, три момента" id="steps" nav="Шаги" scene="steps"}
![Зелёное полярное сияние над краем Земли, снятое с Международной космической станции](assets/aurora-station.jpg)
![Ночная Москва со станции, над горизонтом — зелёная линия сияния и Луна](assets/night-moscow.jpg)

::::beat{title="Наступает ночь"}
Сцена закреплена, пока этот текст прокручивается; каждый эпизод показывает свою картинку.
::::

::::beat{title="Зажигается город"}
На узком экране и при включённом режиме уменьшения движения картинки и эпизоды просто идут друг за другом.
::::

::::beat{title="Свет возвращается"}
Здесь ничего не анимируется по буквам: картинка меняется, когда следующий эпизод доходит до середины экрана.
::::
:::::

:::::section{title="Схема рисуется по мере чтения" id="draw" nav="Прорисовка" scene="steps" transition="lines"}
:::diagram{title="Путь сигнала" description="Сигнал идёт от датчика к архиву, а поправка возвращается назад." layout="right" draw="scroll"}
::node{id="sensor" label="Датчик"}
::node{id="filter" label="Фильтр" kind="accent"}
::node{id="model" label="Модель"}
::node{id="archive" label="Архив" kind="success"}
::edge{from="sensor" to="filter" label="необработанный сигнал"}
::edge{from="filter" to="model" label="очищенный сигнал" kind="data"}
::edge{from="model" to="archive" label="запись"}
::edge{from="model" to="filter" label="поправка" kind="event"}
::legend-item{node="accent" label="Получает поправку"}
::legend-item{node="success" label="Конечная точка"}
:::

::::beat{title="Съём" focus="sensor, filter"}
Связи прорисовываются по порядку потока, пока схема проходит через экран.
::::

::::beat{title="Толкование" focus="filter, model"}
Каждый эпизод подсвечивает ту часть схемы, о которой говорит.
::::

::::beat{title="Хранение" focus="model, archive"}
Поправка обратно к фильтру рисуется последней, отдельной фазой.
::::
:::::

:::::section{title="Числа, которые приходят" id="numbers" nav="Числа" recipe="statement"}
![Концентрические кольца структуры Ришат в пустыне Мавритании, снятые с орбиты](assets/richat.jpg)

:count[1 284] кадра прочитаны, и у :count[97,5 %] из них сохранился горизонт.

В исходнике записаны итоговые числа: при уменьшенном движении они сразу видны без отсчёта.
:::::

:::::section{title="Эффект не подменяет смысл" id="fallback" nav="Без движения" recipe="evidence" media="mask" media-fit="cover" media-aspect="landscape" interaction="tilt"}
![Дым факела над скважиной тянется поперёк гряд дюн песчаного моря Каланшо, вид с орбиты](assets/sand-sea.jpg)

:::decision{title="Сохранить всё содержание без движения"}
Когда в системе включён режим уменьшения движения, изображения, карточки, кнопки и выводы остаются на месте и читаются в
прежнем порядке. Исчезает только движение.
:::

:::popover{title="За что отвечает пакет?" trigger="Посмотреть границу"}
Среда выполнения задаёт время и расстояние, учитывает тип указателя и видимую область страницы, а также
отключает движение по системной настройке. В исходнике выбирается только декларативный тип эффекта.
:::

::::actions{placement="bottom"}
::action[Вернуться к глубине]{href="#opening" kind="primary" effect="magnetic"}
::action[Открыть историю Cinematic]{href="../cinematic-story/index.html" kind="secondary"}
::::
:::::