Представляем «Раскройте потенциал анимации, управляемой прокруткой»

Bramus

Мы с гордостью объявляем о выпуске «Раскройте потенциал анимации, управляемой прокруткой» , 10-частного видеокурса, который поможет вам изучить все тонкости анимации, управляемой прокруткой, с использованием CSS или JavaScript.

Вы можете посмотреть сериал на YouTube . Первый эпизод размещен здесь.

Анимация, управляемая прокруткой?

Благодаря анимации, управляемой прокруткой, вы можете взять существующую CSS-анимацию или анимацию WAAPI и анимировать её при прокрутке. Поэтому анимация, управляемая прокруткой, наследует все преимущества этих API. Это включает в себя аппаратное ускорение анимации, управляемой прокруткой, которая не подвержена рывкам при блокировке основного потока.

Анимация, управляемая прокруткой, доступна в Chrome начиная с версии 115 и идеально подходит для прогрессивного улучшения.

Посмотрите серию видеороликов или ознакомьтесь с документацией , чтобы узнать больше об анимации, управляемой прокруткой.

Эпизоды

Курс состоит из 10 эпизодов и разделен на две большие части: объяснение основных концепций, лежащих в основе анимации, управляемой прокруткой, и несколько практических примеров.

1. Эпизод 1: Введение .
2. Эпизод 2: Основные понятия: scroll() и ScrollTimeline .
3. Эпизод 3: Основные понятия: view() и ViewTimeline .
4. Эпизод 4: Основные понятия: Разъяснение временных диапазонов .
5. Эпизод 5: Основные понятия: поиск по временной шкале и именованные временные шкалы .
6. Эпизод 6: Практическое применение: Добавление теней к контейнеру прокрутки .
7. Эпизод 7: Практическое применение: Анимация элементов в разных направлениях .
8. Эпизод 8: Практическое применение: Анимация 3D-моделей и многое другое на Scroll .
9. Эпизод 9: Практическое применение: Определение скорости прокрутки .
10. Эпизод 10: Заключение .

Эпизоды лучше всего смотреть по порядку, так как они основаны на демонстрациях и методах, рассмотренных в предыдущих эпизодах. Демонстрации и инструменты, показанные в каждом эпизоде, доступны онлайн, ссылки на них указаны в описании.

Больше ресурсов

• Документация: Анимация элементов при прокрутке с помощью анимации, управляемой прокруткой.
• Демонстрации и инструменты: scroll-driven-animations.style
• Загрузите расширение отладчика DevTools.