웹 애니메이션 API (WAAPI) 및 Scrolltimeline을 사용한 스크롤 연결 애니메이션

이 기사는 애니메이션 진행 상황을 스크롤과 연결하는 새로운 웹 기술인 스크롤 연결 애니메이션을 탐색합니다. 이전에 CSS만으로 달성 할 수 있었지만이 기사는 WAAPI (Web Animations API) 및 ScrollTimeline 클래스를 사용한 JavaScript 접근 방식에 중점을 둡니다.

WAAPI를 간단히 검토 한 다음 ScrollTimeline 사용하여 스크롤 구동 애니메이션을 만듭니다. 이는 특히 현재 브라우저 호환성 제한을 고려할 때 CSS 전용 솔루션에 대한 강력한 대안을 제공합니다.

WAAPI : 빠른 새로 고침

WAAPI를 통해 애니메이션에 대한 JavaScript 컨트롤이 가능합니다. 간단한 CSS 애니메이션을 고려하십시오 : 수평으로 확장하면서 빨간색에서 진한 빨간색으로 전환하는 막대. WAAPI 동등한 것은 간결하고 유연합니다.

 새로운 애니메이션 (
  새로운 keyframeeffect (
    document.querySelector ( '. ProgressBar'),
    {
      BackgroundColor : [ 'Red', 'Darkred'],
      변환 : [ 'scalex (0)', 'scalex (1)',
    },
    {
      기간 : 2500,
      채우기 : '포워드',
      완화 : '선형',
    }
  ))
).놀다();

또는 더 간결하게 Element.animate() :

 document.querySelector ( '. ProgressBar'). 애니메이션 (
  {
    BackgroundColor : [ 'Red', 'Darkred'],
    변환 : [ 'scalex (0)', 'scalex (1)',
  },
  {
    기간 : 2500,
    채우기 : '포워드',
    완화 : '선형',
   }
);

두 예 모두 키 프레임 (애니메이션 속성) 및 옵션 (지속 시간, 완화 등)을 정의합니다.

Scrolltimeline 통합

애니메이션을 스크롤 의존적으로 만들기 위해 ScrollTimeline 통합합니다. 이 클래스는 스크롤 컨테이너의 진행 상황에 연결된 애니메이션 타임 라인을 만듭니다. 주요 구성 옵션에는 다음이 포함됩니다.

• source (또는 크롬의 scrollSource ) : 스크롤 가능한 요소. 기본값은 document.scrollingElement 입니다.
• orientation : 스크롤 방향 (예 : 수직의 경우 '블록'). 기본값으로 수직으로.
• scrollOffsets : 타임 라인이 활성화 된 진행 간격을 정의합니다.

예:

 const myscrolltimeline = 새로운 scrolltimeline ({{
  출처 : Document.ScrollingElement,
  오리엔테이션 : '블록',
  Scrolloffsets : [
    새로운 CSSUNITVALUE (0, ' %'),
    새로운 CSSUNITVALUE (100, ' %'),
  ],,
});

이것을 WAAPI 애니메이션에 첨부 :

 새로운 애니메이션 (
  새로운 keyframeeffect (
    document.querySelector ( '#progress'),
    {transform : [ 'scalex (0)', 'scalex (1)',},
    {기간 : 1, 채우기 : 'Forwards'}}
  ),)
  myscrolltimeline
).놀다();

또는 Element.animate() :

 document.querySelector ( "#progress"). 애니메이션 (
  {
    변환 : [ "scalex (0)", "scalex (1)"]
  },
  { 
    기간 : 1, 
    채우기 : "포워드", 
    타임 라인 : MyScrolltimeline
  }
);

이것은 애니메이션 스크롤 구동을 만듭니다. Chromium은 현재 scrollSource 사용합니다.

브라우저 호환성 및 폴리 필

현재 크롬 기반 브라우저 만 ScrollTimeline 완전히 지원하므로 종종 기능 플래그가 필요합니다. Robert Flack의 스크롤 타임 라인 폴리 필드는 더 넓은 호환성을 제공합니다.

 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

고급 사용 : 요소 기반 오프셋

절대 오프셋 외에도 scrollOffsets 스크롤 컨테이너 내의 요소 위치를 기반으로 요소 기반 오프셋을 사용할 수 있습니다. 이 오프셋은 다음과 같습니다.

1. target : 추적 요소.
2. edge : 타임 라인 시계 (예 : 'start', 'end') 대상의 가장자리.
3. threshold : 가시성 백분율 (0.0-1.0).

예:

 {
  대상 : document.querySelector ( '#targetel'),
  가장자리 : '끝',
  임계 값 : 0.5,
}

여러 오프셋 객체를 사용할 수 있습니다.

CSS 대 JavaScript : 비교

CSS 및 JavaScript 접근 방식은 스크롤 연결 애니메이션을 달성합니다. CSS는 단순성 및 점진적 향상에 바람직하지만 현재 브라우저 지원은 제한적입니다. JavaScript는 더 넓은 호환성을 제공하지만 JavaScript를 사용하지 않은 사용자에게는 신중하게 고려해야합니다. 선택은 프로젝트 요구와 우선 순위에 따라 다릅니다. 이 예제는 WAAPI 및 ScrollTimeline 사용하여 JavaScript 접근법의 유연성과 힘을 보여줍니다.

위 내용은 웹 애니메이션 API (WAAPI) 및 Scrolltimeline을 사용한 스크롤 연결 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!