스크롤 기술의 개요

웹 스크롤링 애니메이션 기술은 수년 동안 존재 해 왔으며 최근 몇 년 동안 점점 더 널리 사용되고 있습니다. 이것은 부분적으로 장치 성능의 개선과 애니메이션 효과를 더 잘 처리 할 수있는 능력에 기인 할 수 있습니다.

이 기사는 다양한 스크롤 관련 기술을 간략하게 설명하고 올바른 솔루션을 찾는 데 도움이되는 도구 선택 가이드를 제공하는 것을 목표로합니다. 이러한 기술은 대략 두 가지 범주로 나눌 수 있습니다. 특정 스크롤 동작을 위한 기술과보다 일반적인 스크롤 행동을 위한 기술.

특정 스크롤 행동을위한 기술

최신 브라우저는 일부 간단한 기본 CSS 스크롤 효과를 지원하며, 일부 제한된 사용 사례에서는 스크롤 애니메이션 요구를 충족하기에 충분합니다.

position: sticky

스크롤하는 동안 동일한 위치에 머무르기 위해 페이지에 요소가 필요한 경우 position: sticky 좋은 선택입니다. 간단하고 간단하며 최신 브라우저에 내장됩니다. 그러나 IE 브라우저와 일부 모바일 브라우저에는 폴리 필기 지원이 필요합니다.

CSS 시차

이것은 트릭만큼 기술이 아니지만 간단한 시차 효과에 매우 실용적이므로 페이지의 다른 부분을 다른 속도로 가질 수 있습니다. 가장 큰 단점은 정확한 시차 효과를 달성하기 위해 원근법과 변환을 설정하는 데 사용하는 값을 이해하기가 어렵다는 것입니다.

CSS 스크롤 캡처 포인트

스크롤 스냅 포인트를 사용하면 브라우저가 사용자가 정상적으로 스크롤을 완료 한 후 설정 한 특정 스크롤 위치를 캡처 할 수 있습니다. 이것은 특정 요소가 보이도록 도와줍니다. 그러나 API는 여전히 변경되고 있으므로 최신 API를 사용하고 생산에 의존하지 않도록주의하십시오.

부드러운 스크롤

JavaScript 또는 CSS의 scroll-behavior 속성에서 window.scrollTo() 사용하면 페이지 내의 다양한 부품으로 점프 할 때 스무드 스크롤이 기본적으로 지원됩니다. 현재 모든 브라우저가 원활한 마우스 휠 작동으로 기본적으로 Universal Smooth Scrolling을 지원하는 것은 아닙니다. 다양한 JavaScript 라이브러리는 마우스 휠 작업에 대한 매끄러운 스크롤 지원을 추가하려고 노력하고 있지만 완전히 버그가없고 다른 모든 스크롤 기술과 잘 작동하는 라이브러리를 찾지 못했습니다. 또한 매끄러운 스크롤 자체가 항상 좋은 선택은 아닙니다.

보편적 스크롤링 동작을위한 기술

현재 CSS 만 사용하여 스크롤 위치를 기반으로 범용 애니메이션을 만들거나 트리거하는 것은 불가능합니다 (먼 미래에 어떤 형태의 범용 CSS 기반 범용 스크롤 애니메이션을 지원할 수있는 제안이 있지만) 애니메이션의 일부를 지우는 것은 불가능합니다. 따라서 스크롤하는 동안 요소를 애니메이션하려면 원하는 효과를 만들기 위해 적어도 일부 JavaScript를 사용해야합니다. JavaScript를 사용하여 스크롤 할 때 애니메이션을 트리거하는 두 가지 주요 방법이 있습니다 : 크로스 뷰어 사용 및 스크롤 이벤트 사용.

교차점

크로스 관찰자는 요소가 뷰포트에서 보이는지 여부에 대한 정보 만 필요하고 얼마나 잘 보이는지에 대한 정보 만 있으면 유용합니다. 이것은 애니메이션을 공개하기에 좋은 선택입니다. 그럼에도 불구하고 요소가 뷰포트에 들어가는 방향에 따라 다른 애니메이션을 트리거하는 등 크로스 뷰어를 사용하는 데 어려움이 있습니다 (불가능하지는 않지만). 크로스 뷰어는 요소가 시작과 종말점 사이에 있고 그와 겹치지 않을 때 스크롤링 애니메이션을하고 싶다면 그다지 도움이되지 않습니다.

스크롤 이벤트를 사용하십시오

스크롤 이벤트를 사용하면 스크롤 애니메이션을 제어 할 때 가장 큰 자유를 얻을 수 있습니다. 뷰포트에서 요소의 위치에 관계없이 스크롤 할 때 요소에 영향을 줄 수 있으며 프로젝트 요구에 따라 시작 및 엔드 포인트를 정확하게 설정할 수 있습니다.

즉, 제대로 조절하지 않고 특정 동작을 만들기위한 편리한 API가 없다면 성능에 큰 영향을 줄 수 있습니다. 그렇기 때문에 스로틀 링을 처리하고보다 편리한 API를 제공하는 데 도움이되는 좋은 스크롤 라이브러리를 사용하는 것이 종종 도움이됩니다. 일부 라이브러리는 많은 크기 조정 문제를 처리 할 수도 있습니다!

범용 스크롤링 동작 생성 도구

모든 계산을 직접 수행하지 않고도 스크롤 애니메이션을 완전히 제어 할 수있는 전체 스크롤 라이브러리가 있습니다.

Scrollmagic

ScrollMagic은 다양한 스크롤 효과를 만들기 위해 비교적 간단한 API를 제공하며 GSAP 및 Velocity.js와 같은 다양한 애니메이션 라이브러리에 연결될 수 있습니다. 그러나 지난 몇 년 동안 유지 보수가 점점 줄어들어 스크롤 스케인이 생성되었습니다.

스크롤 스크린

Scrollscene은 본질적으로 Scrollmagic 및/또는 크로스 뷰어를 사용하기 쉽게 만들려고하는 래퍼입니다. 커스텀, 유지 관리 버전의 ScrollMagic을 사용하고 비디오 재생, 장면 초기화 중단 점 및 장면 지속 시간 중단 점과 같은 추가 기능을 추가합니다. 또한 GSAP를 사용합니다.

스크롤리터

ScrollTrigger는 GSAP의 공식 Greensock 플러그인입니다. 기능 목록이 길고 스크롤 라이브러리에서 사용하기 가장 쉬운 API가 있습니다 (적어도 나에게). 이를 통해 스크롤 애니메이션의 시작 및 종료 위치를 정의하고, 애니메이션이 실행될 때 스크롤링하는 동안 모든 것을 애니메이션하고, 애니메이션이 실행될 때 핀 요소를 제자리에 고정하는 것 등을 전적으로 제어 할 수 있습니다. 매끄러운 스크롤 라이브러리에 연결할 수 있으며 완벽하게 함께 작동합니다. 또한 Greensock 및 Greensock 포럼에서 지원합니다.

언급 할 가치가 있습니다 : 기관차 두루마리

위에서 언급 한 다른 라이브러리와 같이 포괄적 인 스크롤 라이브러리가 되려고 시도하지는 않지만 기관차 스크롤은 맞춤형 스무드 스크롤을 제공하는 데 중점을 둡니다. 또한 데이터 속성을 추가하거나 onscroll 이벤트에 연결하여 다른 유형의 객체를 애니메이션하여 DOM 객체의 일부 속성을 애니메이션 할 수 있습니다.

요약

스티커 포지셔닝 및 시차와 같은 특정 스크롤 애니메이션 효과의 경우 적어도 PolyFill을 사용하여 이러한 특성을 지원하지 않는 브라우저를 지원할 때 CSS 기술이 충분할 수 있습니다.

CSS 속성이 할 수있는 모든 작업 등을 수행 할 수 있기 때문에 보통 GSAP의 스크롤리터를 사용하는 것이 좋습니다. ScrollTrigger는 브라우저 지원 및 계산을 처리하여 애니메이션에 집중할 수 있습니다!

다음 표에는 특정 효과를 만드는 데 사용할 수있는 도구가 나와 있습니다.

(성능, 사용 편의성, 기능 등과 같은 다양한 스크롤 기술의 다양한 측면을 비교하려면 테이블을 여기에 삽입해야합니다.)

위 내용은 스크롤 기술의 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!