Bramus는 HTML 및 CSS만을 기반으로 하는 Scroll-Linked Animations에 대한 자신의 기대감을 공유합니다. WAAPI와 통합되는 JavaScript 옵션도 포함되어 있습니다.
챕터:
- 00:00 - 프롤로그
- 00:15 - 소개 + 티저 예
- 03:41 - 스크롤 연결 및 스크롤 트리거 애니메이션 비교
- 05:18 - CSS (문서 타임라인, 스크롤 진행률 타임라인, scroll(), 애니메이션 타임라인)를 사용한 기본 예
- 12:31 - JavaScript를 사용한 기본 예 (ScrollTimeline)
- 14:06 - 이름이 지정된 스크롤 진행률 타임라인 (스크롤 타임라인 이름, 스크롤 타임라인 축)
- 20:31 - 스크롤 진행률 타임라인 오프셋
- 25:05 - 자바스크립트 (ViewTimeline)를 사용하여 들어가거나 나가는 요소 추적
- 31:09 - CSS (view-timeline-name, view-timeline-axis)를 사용하여 들어가거나 나올 때 요소 추적
- 32:02 - 뷰 진행률 타임라인 인셋
- 33:07 - 진행 상황 타임라인의 예 (커버 흐름, 연락처 목록 빠른 이동/플라이아웃, 카드 쌓기) 보기
- 35:40 - 지금 확인해 보세요!
- 38:04 - 에필로그
리소스:
- 커버 흐름 데모 (CSS) → https://goo.gle/3SvEQbd
- 커버 플로우 데모 (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
스크롤로 연결된 애니메이션 폴리필 → https://goo.gle/3SyziN8
CSS WG 문제 '스크롤 오프셋 다시 가져오기'→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
HTTP 203 시리즈에서 동영상 더보기 → http://goo.gle/HTTP203
여기에서 Chrome 개발자를 구독하세요. → https://goo.gle/ChromeDevs
또한 HTTP203 팟캐스트도 마음에 드셨다면 다음 팟캐스트도 확인해 보세요. → https://goo.gle/HTTP203Podcast