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

Брамус

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

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

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

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

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

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

  • Хром: 115.
  • Край: 115.
  • Firefox: за флагом.
  • Сафари: не поддерживается.

Источник

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

Эпизоды

Курс состоит из 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: Аутро .

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

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