offset, без боли.Раньше для анимаций по скроллу приходилось вспоминать, как работают все эти
offsetTop, scrollY, getBoundingClientRect. Потом — математика, потом — кроссбраузерность. Теперь достаточно одного CSS-свойства: animation-timeline: scroll(). Попробуйте в демке.В новом выпуске CSS Боли разбираем, как это работает. Функция
scroll() с параметрами scroller и axis, тонкости с containing block и позиционированием, почему nearest ведёт себя не так очевидно.Это первая часть серии — знакомство с анонимной временной шкалой прокрутки. В следующих выпусках — ещё больше.
Демонстрации:
🔜 Прогрессбар со scroll-анимацией
🔜 Абсолютное позиционирование
🐭 Смотреть на YouTube
🐹 Смотреть в VK