'스크롤 기반 애니메이션 활용' 소개

Bramus

CSS 또는 JavaScript를 사용하여 스크롤 기반 애니메이션에 대해 자세히 알아볼 수 있는 10부작 동영상 과정인 '스크롤 기반 애니메이션의 힘을 발휘하세요'가 출시되었습니다.

YouTube에서 시리즈를 시청할 수 있습니다. 첫 번째 에피소드가 여기에 삽입되어 있습니다.

스크롤 기반 애니메이션

스크롤 기반 애니메이션을 사용하면 기존 CSS 또는 WAAPI 애니메이션을 가져와 스크롤 시 애니메이션을 적용할 수 있습니다. 따라서 스크롤 기반 애니메이션은 이러한 API가 가져오는 모든 이점을 상속합니다. 여기에는 기본 스레드가 차단될 때 버벅거림이 발생하지 않는 하드웨어 가속 스크롤 기반 애니메이션이 포함됩니다.

스크롤 기반 애니메이션은 Chrome 115부터 Chrome에서 사용할 수 있으며 점진적 개선에 적합합니다.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

스크롤 기반 애니메이션에 대해 자세히 알아보려면 동영상 시리즈를 시청하거나 문서를 읽어보세요.

에피소드

이 과정은 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: 아우트로

이 에피소드는 이전 에피소드에서 다룬 데모와 기법을 기반으로 하므로 순서대로 시청하는 것이 좋습니다. 각 에피소드에 표시된 데모와 도구는 온라인에서 확인할 수 있으며 설명에 링크되어 있습니다.

추가 리소스