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

Bramus

CSS 또는 JavaScript를 사용한 스크롤 기반 애니메이션에 관한 모든 것을 배울 수 있는 10부작 동영상 과정인 'Unleash the Power of Scroll-Driven Animations'가 출시되었습니다.

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

스크롤 기반 애니메이션?

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

스크롤 기반 애니메이션은 Chrome 115부터 Chrome에서 사용할 수 있으며 점진적인 개선을 위한 완벽한 후보입니다.

브라우저 지원

  • 115
  • 115
  • x

소스

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

에피소드

이 과정은 10개의 에피소드로 구성되어 있으며 두 개의 큰 부분으로 나뉘어져 있습니다. 스크롤 기반 애니메이션을 구성하는 핵심 개념에 대한 설명과 몇 가지 실용적인 적용입니다.

  1. 에피소드 1: 소개.
  2. 에피소드 2: 핵심 개념: scroll() 및 ScrollTimeline
  3. 에피소드 3: 핵심 개념: view() 및 ViewTimeline
  4. 에피소드 4: 핵심 개념: 타임라인 범위 알기
  5. 에피소드 5: Core Concepts: Timeline Lookup and Named Timelines(타임라인 조회 및 명명된 타임라인)
  6. 에피소드 6: 실용적인 애플리케이션: 스크롤 컨테이너에 스크롤 그림자 추가.
  7. 에피소드 7: 실용적인 적용: 다양한 방향으로 요소에 애니메이션 적용.
  8. 에피소드 8: 실용적인 적용: 스크롤에서 3D 모델 애니메이션 등
  9. 에피소드 9: 실용적인 적용: 스크롤 속도 감지
  10. 에피소드 10: 아우트로.

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

추가 리소스