#заметка дня

Ну что, настало время второй части заметки про анимацию по скроллу: https://t.me/htmlshit/614

На сей раз в дело идут самые современные API.

Давайте определим, что же нам нужно, чтобы связать прокрутку с элементом?

Да в общем, не так много: высота документа, высота видимой области экрана, координаты "начала" и "конца" элемента относительно документа и видимой высоты экрана, статус прокрутки.

Теперь можно составить пропорцию и анимировать любое нужное нам свойство элемента, что мы и делали в прошлый раз.

Но ведь браузеру и так это всё уже известно! Неужели нельзя упростить? Так вот, можно. Ну, почти. И для этого создаются новые браузерные API под общим именем ScrollTimeline: https://wicg.github.io/scroll-animations/

Черновик, понятное дело.

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

Набросаем код для логики, описанной выше. Самое интересное: никакого псевдокода!…

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...