Scroll-анимации: было больно — стало изящно | CSS Боль скачать в хорошем качестве

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