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

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

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

    • Функция view timeline

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

    • View subject

      Выбирает principal box, прохождение которого определяет progress.

    • View source scroller

      Использует ближайший подходящий ancestor scroll container subject.

    • Named view timeline

      Объявляет view progress timeline на subject.

    • Cover range

      Использует полное прохождение subject через scrollport как основной range.

    • View progress

      Соотносит начало и конец visibility passage с `0%` и `100%`.

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

    • Имя view timeline

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

    • Ось view timeline

      Выбирает logical или physical axis прохождения subject.

    • View timeline inset

      Сужает или расширяет visibility range относительно scrollport.

    • View timeline shorthand

      Объединяет name, axis и inset в `view-timeline`.

    • Visibility range

      Формирует область, относительно которой измеряется прохождение subject.

    • Contain range

      Выделяет интервал полного containment или полного покрытия visibility range.

    • Entry range

      Выделяет интервал входа subject в visibility range.

    • Exit range

      Выделяет интервал выхода subject из visibility range.

    • Entry-crossing range

      Выделяет прохождение subject через end edge visibility range.

    • Exit-crossing range

      Выделяет прохождение subject через start edge visibility range.

    • Scroll range

      Использует полный range source scroll container для view timeline.

    • Range-relative keyframe position

      Соотносит range name и percentage с точкой общей timeline.

  3. Экспертный уровень

    • View timeline offsets

      Вычисляет start и end scroll offsets относительно scroll origin.

    • Геометрия cover

      Восстанавливает endpoints полного прохождения border box через visibility range.

    • Геометрия contain

      Определяет contain endpoints с учётом соотношения размеров subject и visibility range.

    • Геометрия entry и exit

      Строит entry и exit из соответствующих endpoints cover и contain.

    • Геометрия crossing ranges

      Определяет crossing endpoints по совпадению border edges subject и visibility range.

    • Progress named range

      Нормализует позицию общей timeline внутри выбранного named range.

    • Inactive view timeline

      Получает inactive state из отсутствующего subject box, source scroller или подходящей scrollability.

    • Недостижимый view progress

      Различает нормативные endpoints timeline и фактически достижимые scroll positions.