Scroll-driven анимации

Анимации, привязанные к прокрутке: прогресс чтения и параллакс.

Уровень: продвинутый 10 разделов 15 минут

1. Что это и зачем

Анимации, привязанные к прокрутке: прогресс чтения и параллакс.

Современный CSS добавляет инструменты, которые раньше требовали JavaScript или препроцессоров: переменные (custom properties), каскадные слои (@layer), логические свойства, container queries, :has(), @property.

{title} — это инструменты, которые ведут CSS в будущее: осваивайте их по мере набора опыта.

2. Синтаксис и пример

@keyframes grow { from { scale: 1; } to { scale: 2; } } .bar { animation: grow linear; animation-timeline: scroll(); }

Запись выше — базовый вариант использования. Обратите внимание, как scroll-driven анимации вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Свойства группируются по назначению: переменные для тем, слои для порядка каскада, логические свойства для направлений, контейнерные запросы для независимой адаптации компонентов.

В реальной разметке scroll-driven анимации встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это инструменты, которые ведут CSS в будущее: осваивайте их по мере набора опыта.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Бóльшая часть современных возможностей — в свежих версиях всех браузеров. Используйте @supports и fallback, чтобы старый браузер получил упрощённый, но рабочий вид.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Прокручиваем строку как таймлайн.

Поддержка растёт: деградация — статичное значение.

7. Практическое задание

Сделайте индикатор прогресса чтения.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

@keyframes grow { from { scale: 1; } to { scale: 2; } } .bar { animation: grow linear; animation-timeline: scroll(); }

8. Как применять в проектах

Темы на переменных, компоненты с контейнерными запросами, правила с @layer вместо ритуальных !important, логическая вёрстка для интернационализации.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

переменные для часто меняющихся значений;
@layer упорядочивает каскад явно;
для новых свойств есть fallback;
:has() не вешает правила на всё и сразу;
логические свойства там, где меняется направление;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам