오늘의 GUI 챌린지에서 @AdamArgyleInk는 스크롤할 수 있는 대화형 환경을 만들어 #CSS를 고전 공상과학 영화 3D 텍스트 효과에 적용했습니다. 최신 Scroll Animations 1 사양에서 지정한 대로 CSS 스크롤 링크로 연결된 애니메이션으로 구동됩니다. 텍스트가 일부 스크롤되어 은하계의 가장자리(즉, 표시 영역)로 사라지는 과정을 살펴보세요.
챕터:
- 0:00 - 소개
- 0:29 - 소개
- 1:00 - 스토리 시간
- 2:20 - 스크롤 기반 애니메이션
- 3:21 - HTML
- 4:00 - CSS
- 8:58 - 디버깅
- 10:52 - 아우트로
리소스:
- 데모 사용해 보기 → https://goo.gle/410acMc
- 출처 확인하기 → https://goo.gle/408Nkc1
- 사양을 확인하세요. → https://goo.gle/3pvWX49
더 많은 GUI 챌린지를 시청하세요 → https://goo.gle/GUIchallenges
Chrome 개발자 구독하기 → https://goo.gle/ChromeDevs