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

Брамус

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

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

Анимация с помощью прокрутки?

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

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

Browser Support

  • Хром: 115.
  • Край: 115.
  • Firefox: за флагом.
  • Сафари: 26.

Source

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

Эпизоды

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

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

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