Scroll-анимации: было больно — стало изящно | CSS Боль
Автор: HTML Academy
Загружено: 2026-01-26
Просмотров: 144
Описание:
Раньше анимации по скроллу — это боль: 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
Повторяем попытку...
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке: