view()

Ограниченная доступность

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

Экспериментально: Это экспериментальная технология.
Перед использованием в производстве внимательно проверьте таблицу совместимости браузеров.

Функцию view() CSS-функции можно использовать с animation-timeline, чтобы указать элемент-объект, который предоставит анонимную временную шкалу прогресса просмотра для анимации. Временная шкала прогресса просмотра продвигается за счёт изменения видимости элемента-объекта внутри ближайшего предка-прокручивателя. Видимость объекта внутри прокручивателя отслеживается — по умолчанию, временная шкала равна 0%, когда объект впервые становится видимым на одном краю прокручивателя, и 100%, когда он достигает противоположного края.

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

Примечание: Если указанная ось не содержит полосы прокрутки, то временная шкала анимации будет неактивна (с нулевым прогрессом).

Примечание: Каждое использование view() соответствует собственному уникальному экземпляру ViewTimeline в API веб-анимаций.

Синтаксис

/* Function with no parameters set */
animation-timeline: view();

/* Values for selecting the axis */
animation-timeline: view(block); /* Default */
animation-timeline: view(inline);
animation-timeline: view(y);
animation-timeline: view(x);

/* Values for the inset */
animation-timeline: view(auto); /* Default */
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);

/* Examples that specify axis and inset */
animation-timeline: view(block auto); /* Default */
animation-timeline: view(inline 20%);
animation-timeline: view(x 200px auto);

Параметры

axis

Значение оси полосы прокрутки может быть любым из следующих:

block: Полоса прокрутки по оси блоков контейнера прокрутки, которая является осью в направлении, перпендикулярном потоку текста в строке. Для горизонтальных режимов написания, таких как стандартный английский, это то же самое, что y, а для вертикальных режимов написания — то же самое, что x. Это значение по умолчанию.
inline: Полоса прокрутки по оси строки контейнера прокрутки, которая является осью в направлении, параллельном потоку текста в строке. Для горизонтальных режимов написания это то же самое, что x, а для вертикальных режимов написания — то же самое, что y.
y: Полоса прокрутки по вертикальной оси контейнера прокрутки.
x: Полоса прокрутки по горизонтальной оси контейнера прокрутки.

inset

Значение inset может иметь одно или два значения, которые могут быть либо auto или <length-percentage>. Оно задаёт отступ (положительный) или смещение (отрицательное) области scrollport. Отступ используется для определения того, находится ли элемент в поле зрения, что определяет длительность временной шкалы анимации. Другими словами, анимация длится до тех пор, пока элемент находится в области видимости, скорректированной с помощью отступа.

start: Внутреннее смещение от начала scrollport.
end: Внутреннее смещение от конца scrollport.

Примечание: Значения прокручивателя и отступа могут быть указаны в любом порядке.

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

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

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Настройка анонимной временной шкалы прогресса просмотра

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

HTML

Ниже показан HTML для примера.

<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 и элементы content минимально стилизованы, и содержимому текста заданы основные настройки шрифта:

.subject {
  width: 300px;
  height: 200px;
  background-color: deeppink;
}

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

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

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

.subject-container {
  border: 2px dashed black;
  width: 300px;
  margin: 0 auto;
}

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

.top {
  top: 0;
  height: 244px;
  align-items: end;
}

.bottom {
  top: 432px;
  height: 48px;
}

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

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

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

.animation {
  animation-timeline: view(block 50% 10%);

  animation-name: grow;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}

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

  to {
    transform: scaleX(1);
  }
}

Результат

Прокрутите, чтобы увидеть анимированный элемент-объект.

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

Спецификация
Анимации, управляемые прокруткой # view-notation

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`view`	115	115	114	101	Нет	115	Нет	77	Нет	23.0	115

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view