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

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

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

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

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

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

Поддержка браузера

  • 115
  • 115
  • Икс

Источник

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

Эпизоды

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

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

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

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