Анимации, управляемые прокруткой CSS

Модуль анимаций, управляемых прокруткой CSS предоставляет функциональность, построенную поверх модуля анимаций CSS и API анимаций Web. Он позволяет анимировать значения свойств, основываясь на прогрессе по временной шкале, управляемой прокруткой, вместо стандартной временной шкалы документа. Это означает, что вы можете анимировать элемент, прокручивая прокручиваемый элемент, а не только со временем.

Существует два типа временных шкал, управляемых прокруткой:

• временная шкала прогресса прокрутки: Вы продвигаете эту временную шкалу, прокручивая прокручиваемый элемент (прокручиватель) сверху вниз (или слева направо) и обратно. Положение в диапазоне прокрутки преобразуется в процент прогресса — 0% в начале и 100% в конце.
• временная шкала прогресса видимости: Вы продвигаете эту временную шкалу, основываясь на изменении видимости элемента (известного как объект) внутри прокручивателя. Видимость объекта внутри прокручивателя отслеживается как процент прогресса — по умолчанию временная шкала находится на 0%, когда объект впервые становится видимым на одном краю прокручивателя, и на 100%, когда он достигает противоположного края.

Когда одна из этих двух временных шкал применяется к анимируемому элементу, анимация продвигается по этой временной шкале вместо стандартной временной шкалы.

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

• Можно применить значения диапазона начала и конца анимации к анимации, чтобы настроить положение начальной и конечной позиции анимации по временной шкале.
• К временным шкалам прогресса видимости можно применить начальный и/или конечный отступ (или смещение) для настройки положения области прокрутки (см. Контейнер прокрутки для получения более подробной информации). Другими словами, это позволяет указать начальные и/или конечные значения отступа (или смещения), которые смещают положение самой временной шкалы.