Брамус делится своим восторгом по поводу анимации с прокруткой, которая основана только на HTML и CSS. Также включена опция JavaScript, интегрируемая с WAAPI!
Главы:
- 00:00 - Пролог
- 00:15 – Вступление + пример тизера
- 03:41 – Анимация, связанная с прокруткой, и анимация, запускаемая прокруткой
- 05:18 – Базовый пример с использованием CSS (временная шкала документа, временная шкала прокрутки, прокрутка(), временная шкала анимации)
- 12:31 – Базовый пример с использованием JavaScript (ScrollTimeline)
- 14:06 — Именованные временные шкалы прогресса прокрутки (имя прокрутки-временной шкалы, прокрутка-шкала времени)
- 20:31 – Смещения временной шкалы прогресса прокрутки
- 25:05 – Отслеживание элементов при их входе и выходе с помощью JavaScript (ViewTimeline)
- 31:09 — Отслеживание элементов при их входе и выходе с помощью CSS (имя-временной шкалы просмотра, ось просмотра-временной шкалы)
- 32:02 – Просмотр врезок временной шкалы прогресса
- 33:07 — Просмотр примеров временной шкалы прогресса (последовательность обложек, всплывающее/выходное сообщение со списком контактов, группирование карточек)
- 35:40 — Поиграйте сегодня!
- 38:04 - Эпилог
Ресурсы:
- Демонстрация Cover Flow (CSS) → https://goo.gle/3SvEQbd
- Демо Cover Flow (JS+WAAPI) → https://goo.gle/3F9S62h
- Демонстрация прогресса прокрутки (CSS) → https://goo.gle/3F9S6zj
- Демонстрация прогресса прокрутки (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Показ изображения при входе в демо-версию (CSS) → https://goo.gle/3F9S8XX
- Показ изображения при входе в демо-версию (JS+WAAPI) → https://goo.gle/3Sto8JK
- Список демонстрационных эффектов всплывающего и всплывающего окна (CSS) → https://goo.gle/3Svg3UE
- Список демонстрационных эффектов всплывающего и всплывающего окна (JS+WAAPI) → https://goo.gle/3F9Saix
- Демонстрация секции горизонтальной прокрутки (CSS) → https://goo.gle/3SpaDe5
- Демонстрация секции горизонтальной прокрутки (JS+WAAPI) → https://goo.gle/3SAbcBz
- Параллакс-обложка для прикрепленного заголовка, подделка (JS+WAAPI) → https://goo.gle/3SKoMCR
Демонстрация стекирования карточек (JS+WAAPI) → https://goo.gle/3VW0wjD
Коллекция со всеми демоверсиями CSS → https://goo.gle/3F9ScqF
Коллекция со всеми демо-версиями JS+WAAPI → https://goo.gle/3F9ScXH
Спецификация анимации, связанной с прокруткой → https://goo.gle/3F9SduJ
Анимация, связанная с прокруткой Polyfill → https://goo.gle/3SyziN8
Проблема CSS WG «Верните смещения прокрутки» → https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Больше видео из серии HTTP 203 → http://goo.gle/HTTP203
Подпишитесь на разработчиков Google Chrome здесь → https://goo.gle/ChromeDevs
Также, если вам понравилось, вам может понравиться подкаст HTTP203 → https://goo.gle/HTTP203Podcast