Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Scroll-driven анимации/ Scroll progress timelines

  1. Базовый уровень

    • Функция scroll timeline

      Создаёт anonymous scroll progress timeline через `scroll()`.

    • Named scroll timeline

      Объявляет scroll progress timeline на scroll container.

    • Имя scroll timeline

      Назначает timeline dashed identifier через `scroll-timeline-name`.

    • Ось scroll timeline

      Выбирает ось scrolling, которая управляет progress.

    • Scroll progress

      Соотносит startmost и endmost scroll positions с `0%` и `100%`.

    • Scroll timeline shorthand

      Объединяет name и axis в свойстве `scroll-timeline`.

  2. Продвинутый уровень

    • Source scroller

      Определяет scroll container, чья позиция задаёт timeline progress.

    • Nearest scroller

      Выбирает ближайшего подходящего ancestor scroll container.

    • Root scroller

      Использует document viewport как source через `root`.

    • Self scroller

      Использует principal box самого элемента как source через `self`.

    • Logical scroll axes

      Интерпретирует `block` и `inline` через writing mode scroll container.

    • Physical scroll axes

      Выбирает horizontal или vertical scrolling через `x` и `y`.

    • Scroll origin

      Отсчитывает progress от startmost position с учётом scroll origin.

    • Формула scroll progress

      Делит текущий scroll offset на доступную scroll distance.

    • Inactive scroll timeline

      Получает inactive state при отсутствии подходящего box, axis или scrollable overflow.