Scroll-анимации: было больно — стало изящно | CSS Боль

Описание: Раньше анимации по скроллу — это боль: offset, математика, кроссбраузерность. Теперь одно CSS-свойство animation-timeline: scroll() решает всё. Ссылки на демонстрации — в нашем Телеграме: https://t.me/cssbol.

Это первый ролик из серии про CSS scroll-driven animations. Разбираем анонимную временную шкалу прокрутки — функцию scroll() с параметрами scroller (nearest, root, self) и axis (block, inline). Объясняем, почему nearest работает не так очевидно и как containing block влияет на привязку анимации.

Таймкоды:
00:00 CSS-анимации по скроллу — зачем нужны
01:34 Поддержка браузерами и прогрессивное улучшение
02:55 Базовая настройка: scroll() без параметров
05:01 animation-timeline — как работает
06:56 Timing function и наличие скролла
09:46 Функция scroll() и параметр scroller
12:17 Containing block и режим nearest
15:39 Параметр root — привязка к корню
17:02 Параметр self — анимация собственного скролла
18:06 Параметр axis — горизонтальная прокрутка
19:14 Итоги и что дальше

Ссылки:
– Первый выпуск CSS Боли про containing block →    • Абсолютное позиционирование | CSS Боль  
– Спецификация Scroll-driven Animations → https://www.w3.org/TR/scroll-animatio...
– Спецификация CSS Positioned Layout → https://www.w3.org/TR/css-position-3/
– Канал в Телеграме → https://t.me/cssbol

Подписывайтесь на канал, чтобы не пропустить продолжение серии про scroll-анимации!

#css #scrollanimations #webdevelopment #frontend #animation