ScrollTimeline

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

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

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

Интерфейс ScrollTimeline API веб-анимаций представляет собой временную шкалу прогресса прокрутки (см. CSS-анимации, управляемые прокруткой для получения более подробной информации).

Передайте экземпляр ScrollTimeline конструктору Animation() или методу animate(), чтобы указать его как временную шкалу, которая будет контролировать прогресс анимации.

Конструктор

ScrollTimeline() Экспериментально: Создаёт новый экземпляр объекта ScrollTimeline.

Свойства экземпляра

Этот интерфейс также наследует свойства родительского интерфейса AnimationTimeline.

source Только для чтения Экспериментально: Возвращает ссылку на элемент прокрутки (scroller), положение прокрутки которого управляет прогрессом временной шкалы, а следовательно, и анимацией.
axis Только для чтения Экспериментально: Возвращает перечисление, представляющее ось прокрутки, которая управляет прогрессом временной шкалы.

Методы экземпляра

Этот интерфейс наследует методы родительского интерфейса AnimationTimeline.

Примеры

Отображение источника и оси временной шкалы прогресса прокрутки

В этом примере мы анимируем элемент с class box по временной шкале прогресса прокрутки — он анимируется по экрану при прокрутке документа. Мы выводим элемент source и прокручиваем axis к элементу output в правом верхнем углу.

HTML

Ниже приведен HTML для примера.

<div class="content"></div>
<div class="box"></div>
<div class="output"></div>

CSS

CSS для примера выглядит следующим образом:

.content {
  height: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 20px;
  left: 0%;
}

.output {
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  top: 5px;
  right: 5px;
}

JavaScript

В JavaScript мы получаем ссылки на элементы box и output <div>, затем создаем новую ScrollTimeline, указав, что элемент, который будет управлять прогрессом временной шкалы прокрутки, — это элемент документа (<html>), а ось прокрутки — ось block. Затем мы анимируем элемент box с помощью API веб-анимаций. Наконец, мы отображаем элемент-источник и ось в элементе output.

const box = document.querySelector(".box");
const output = document.querySelector(".output");

const timeline = new ScrollTimeline({
  source: document.documentElement,
  axis: "block",
});

box.animate(
  {
    rotate: ["0deg", "720deg"],
    left: ["0%", "100%"],
  },
  {
    timeline,
  },
);

output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;

Результат

Прокрутите, чтобы увидеть анимацию блока.

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`ScrollTimeline`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115
`ScrollTimeline`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115
`axis`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115
`source`	115	115	Нет	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/API/ScrollTimeline