CSS-функция `view()`

view() — это CSS-функция, которая используется со свойством animation-timeline для создания анонимной временной шкалы прогресса просмотра, основанной на появлении элемента в области видимости внутри ближайшего к нему контейнера прокрутки. Можно настроить ось отслеживания и необязательные отступы, чтобы задать момент, когда элемент считается «видимым».

Синтаксис

/* No parameters */
animation-timeline: view();

/* Axis parameter */
animation-timeline: view(block);
animation-timeline: view(x);

/* Inset parameter */
animation-timeline: view(auto);
animation-timeline: view(20%);
animation-timeline: view(200px);
animation-timeline: view(20% 40%);
animation-timeline: view(20% 200px);
animation-timeline: view(100px 200px);
animation-timeline: view(auto 200px);

/* Axis and inset parameters */
animation-timeline: view(block auto);
animation-timeline: view(inline 20%);
animation-timeline: view(x 200px auto);

Параметры

<axis>

Задает направление прокрутки, используемое временной шкалой прогресса просмотра. Значением может быть одно из ключевых слов <axis>: block, inline, x или y. Значение по умолчанию — block.

<view-timeline-inset>

Задает область отступа, определяющую момент, когда элемент считается «видимым». Значением может быть ключевое слово auto или до двух значений <length-percentage>.

Описание

Временная шкала прогресса просмотра изменяется в зависимости от видимости целевого элемента внутри ближайшего к нему контейнера прокрутки. Функция view() используется со свойством animation-timeline для создания такой временной шкалы прогресса просмотра.

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

• Ось: По умолчанию view() использует блочную ось. Это можно изменить, указав явное значение <axis>. Если на выбранной оси нет полосы прокрутки, временная шкала анимации будет неактивна (нулевой прогресс).
• Отступ: По умолчанию временная шкала находится на отметке 0% (ключевой кадр from в анимации @keyframes), когда целевой элемент впервые становится видимым у одного края области прокрутки, и на отметке 100% (ключевой кадр to), когда внешний край границы элемента достигает противоположного края области прокрутки. Эти точки можно настроить с помощью параметров <view-timeline-inset>. Анимация длится, пока элемент находится в области просмотра с учетом отступов. Отступ используется для определения того, находится ли элемент в области просмотра, что, в свою очередь, определяет продолжительность временной шкалы анимации. Отступ состоит не более чем из двух значений, каждое из которых может быть ключевым словом auto или значением <length-percentage>.
  • Первое значение задает начало — смещение внутрь от начала области прокрутки.
  • Второе значение, если оно указано, задает конец — смещение внутрь от конца области прокрутки. Если значение больше 0, оно задает положительный отступ. Отрицательное значение задает смещение наружу относительно области прокрутки.

Компоненты оси и отступа можно указывать в любом порядке. В компоненте отступа первое значение задает отступ в начале, а второе — отступ в конце.

Формальный синтаксис

<view()> = 
  view([<axis> || <'view-timeline-inset'>]?)

<axis> = 
  block |
  inline |
  x |
  y

Примеры

Создание анонимной временной шкалы прогресса просмотра с помощью view()

В этом примере мы создаем анонимную временную шкалу прогресса просмотра для элемента с классами subject и animation с помощью animation-timeline: view(). В результате при прокрутке документа этот элемент анимируется, перемещаясь вверх по документу.

HTML

В середине текста добавим следующий фрагмент (обратите внимание, что для краткости в HTML скрыто много содержимого):

<div class="subject-container">
  <div class="subject animation"></div>
</div>

<div class="content">
  <h1>Content</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject-container">
    <div class="subject animation"></div>
  </div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

Также добавим два наложения, чтобы визуализировать диапазон анимации:

<div class="overlay top">inset start 50%</div>
<div class="overlay bottom">inset end 10%</div>

CSS

Стили для subject и subject-container включают:

.subject {
  width: 300px;
  height: 200px;
  background-color: deeppink;
}
.subject-container {
  border: 2px dashed black;
  width: 300px;
  margin: 0 auto;
}

Класс subject-container показывает границы анимации. Мы задаем наложения top и bottom, чтобы обозначить область прокрутки с учетом отступов.

.overlay {
  position: fixed;
}

.top {
  top: 0;
  height: 50%;
}

.bottom {
  bottom: 0;
  height: 10%;
}

Элемент <div> с классом subject также получает класс animation. Анимация grow увеличивает или уменьшает элемент subject. Правило animation-timeline: view(block 50% 10%) задает анимацию элемента по мере его перемещения вдоль временной шкалы прогресса просмотра, созданной ближайшим контейнером прокрутки (в данном случае — корневым элементом документа).

При прокрутке вниз обратите внимание, что значения отступа 50% 10% приводят к началу анимации, когда элемент находится на расстоянии 10% от нижнего края области прокрутки, и к ее завершению, когда он находится на расстоянии 50% от верхнего края. По мере продвижения анимации по временной шкале элемент subject увеличивается. При прокрутке вверх анимация идет в обратном направлении: начинается на расстоянии 50% от верхнего края, проходит ключевые кадры в обратном порядке и заканчивается на расстоянии 10% от нижнего края. Таким образом, при обратном воспроизведении анимации элемент subject уменьшается.

Важно помнить, что анимация длится только пока элемент subject находится в области просмотра, которая в этом примере задается значениями отступа 50% 10%.

.animation {
  animation-timeline: view(block 50% 10%);
  animation-name: grow;
  animation-timing-function: linear;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p {
  font-size: 1.5rem;
  line-height: 1.8;
}

.overlay {
  width: 100%;
  background-color: #f5deb3aa;
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
  color: red;
  justify-content: flex-end;
}
.top {
  align-items: end;
}

@layer no-support {
  @supports not (animation-timeline: view()) {
    body::after {
      content: "Your browser doesn't support the CSS `view()` function.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;

      position: absolute;
      inset: 0;
      bottom: auto;
    }
  }
}

Для краткости остальная часть CSS скрыта.

Результат

Прокрутите страницу, чтобы увидеть, как элемент с классом subject анимируется при появлении в области просмотра с учетом отступов и при выходе из нее.

Спецификации

Совместимость с браузерами

См. также

• animation-timeline
• Временные шкалы анимации, управляемые прокруткой
• Использование CSS-анимаций
• Модуль CSS-анимации, управляемые прокруткой
• Модуль CSS-анимации
• ViewTimeline
• API веб-анимаций