jQuery 및 CSS3을 사용하여 스크롤 기반 애니메이션 생성

운동을 만드는 것은 시청자에게 흥미롭고 대화식 경험을 제공하는 좋은 방법입니다. 현대적인 사이트가 더 많은 상호 작용을 제공함으로써 간단한 웹 사이트조차도 방문자를 참여시키기 위해 어느 정도의 애니메이션 / 움직임을 제공 할 것으로 기대되고 있습니다.

오늘 나는 당신이 당신의 웹 프로젝트에 적응할 수있는 기술을 요약 할 것입니다-사전 정의 된 지역으로 스크롤 할 때 애니메이션을 트리거합니다. 이 애니메이션은 CSS 변환 및 CSS 전환을 사용하여 만들어집니다. 또한 요소가 표시되는시기를 감지하고 적절한 클래스를 추가/제거하기 위해 jQuery를 사용합니다. 이 예제를보고 싶은 사람들의 경우 데모로 바로 뛰어 올 수 있습니다.

키 테이크 아웃

스크롤 기반 애니메이션은 jQuery 및 CSS3을 사용하여 생성 할 수 있으며 시청자에게 대화식 경험을 제공합니다. 이 애니메이션은 사용자가 사전 정의 된 영역으로 스크롤하여 더 매력적이고 시각적으로 매력적입니다.

. 이 기술에는 CSS 변환 및 CSS 전환을 사용하는 것이 포함되며, 요소가 표시되는시기를 감지하고 적절한 클래스를 추가/제거하는 데 jQuery가 사용됩니다. 이 접근법에 대한 고려 사항에는 브라우저 호환성 및 속도가 포함되며, 부드러운 애니메이션을위한 2D 및 3D 변환을 지원하는 최신 브라우저. 프로세스에는 시원한 애니메이션 요소를 감지하고 스크롤 이벤트에 연결하고, 크기 조정을 처리하고, 요소의 높이와 폭을 계산하는 것이 포함됩니다. 요소가 뷰포트 내에있을 때 애니메이션을 트리거 할 수 있으므로 대화식 인터페이스에 대해 추가 변환 또는 효과가 연결될 수 있습니다. 스크롤 애니메이션의 예에는 왼쪽의 요소를 슬라이딩, 바닥 위쪽에서 페이딩하는 요소 및 다중 단계 튀는 애니메이션이 포함됩니다. 이러한 기술은 직원 프로필 또는 코스 정보 표시와 같은 다양한 웹 프로젝트에 적합 할 수 있습니다.

왜 스크롤에서 애니메이션을 트리거 하는가? 스크롤에서 애니메이션을 트리거하려는 주된 이유는 사용자가 요소를 보는 것처럼 활성화되기 때문입니다.

우리는 요소를 사라지거나 흥미로운 변환을 제공하고 싶을 수도 있으며, 이는 사용자가 실제로 볼 수있을 때만 의미가 있습니다.

CSS 또는 jQuery와 함께 애니메이션?

각 접근 방식에는 장단점이 있습니다. jQuery (JavaScript 읽기) CSS가하지 않는 것들 (예 : 스크롤 위치 또는 요소의 속성)을 애니메이션 할 수는 있지만 CSS 애니메이션은 CSS에 모든 애니메이션 및 프리젠 테이션 논리를 넣는 것을 선호하는 개발자에게 매우 매력적일 수 있습니다. 층.

나는 CSS를 통한 변환을 사용하지만 상황에 따라 항상 고려해야 할 변수가 있습니다. 다음 요소를 고려할 것입니다.

브라우저 호환성 우리의 솔루션은 변환을 기반으로하므로 브라우저 호환성은 2D 변환 또는 3D 변환을 지원하는 것과 제한됩니다.

모든 최신 브라우저는 3D 변환을 지원하며 Internet Explorer 9 및 Opera 11.5와 같은 몇몇 구형 레거시 브라우저는 2D 변환을 지원합니다. 데스크탑 및 모바일 브라우저 모두에 대한 전반적인 지원은 포괄적입니다.

JQuery의 애니메이션 방법은 1.x 버전의 라이브러리를 사용하는 경우 모든 (Sane) 브라우저에서 작동합니다. JQuery 2.X는 IE8 이하의 지원을 제거 했으므로 레거시 브라우저를 지원할 필요가없는 경우에만 사용하십시오 (운이 좋다!).

속도 우리는 특히 모바일 장치와 관련하여 빠르고 부드러운 애니메이션을 원합니다. 따라서 가능한 경우 항상 전환 및 변형을 사용하는 것이 가장 좋습니다.

예제는 이전 브라우저 용 2D 낙진과 함께 3D 변환을 사용합니다. 우리는 속도를 위해 하드웨어 가속을 강제로 만들고 싶습니다. 따라서 3D 변환은 필수입니다 (GPU 가속 렌더링을 유발하는 다른 기능과 함께 Translate3D를 사용할 것입니다). jQuery의 애니메이션 방법은 GPU 보조 변환보다 상당히 느리기 때문에 애니메이션 자체가 아니라 이벤트 처리 / 계산에 jQuery를 사용하여 (가능한 한 매끄럽게되기를 원합니다).

사이드 노트 우리 모두 jQuery! == javaScript를 알고 있습니까? 글쎄, 애니메이션에 바닐라 JS를 사용하는 것은 결국 아이디어가 나쁘지 않을 수 있습니다. 이 튜토리얼의 범위를 벗어난 반면, 더 많은 것을 찾는 데 관심이있는 사람들을위한 주제에 관한 두 가지 훌륭한 기사가 있습니다.

CSS 대 JS 애니메이션 : 더 빠르나요? 신화 파열 : CSS 애니메이션 vs. javaScript
이제 쇼로 돌아가서… 에서 애니메이션 요소 감지 이 기술의 전반적인 요점은 우리가 애니메이션 가능한 것으로 표시 한 모든 요소를 ​​살펴보고 현재 뷰포트 내에 있는지 확인하는 것입니다. 우리가 어떻게이를 달성 할 것인지 단계를 밟아 봅시다 :

선택기 캐싱 스크롤링은 비싼 사업입니다. 이벤트 리스너를 스크롤 이벤트에 첨부하면 사용자가 페이지를 스크롤 할 때마다 여러 번 발사됩니다. 사용자가 스크롤 할 때마다 차원 / 계산 기능을 호출 할 때, 선택기가 변수로 반환 한 요소를 저장하는 것이 좋습니다. 이것은 선택기 캐싱으로 알려져 있으며 우리가 DOM을 반복해서 쿼리하는 것을 피합니다. 우리의 스크립트에서 우리는 창체 객체와 애니메이션을 원하는 요소의 컬렉션을 참조 할 것입니다.

변수 앞에 달러 표시를 주목하십시오. 이것은 jQuery 객체 또는 객체의 수집을 보유하고 있음을 나타내는 규칙입니다.

. 스크롤 이벤트에 훅킹 다음으로 우리는 스크롤 이벤트를 듣는 이벤트 핸들러를 만듭니다. 페이지를 스크롤하면 불이 나옵니다. check_if_in_view 함수 (1 분 안에 얻을 수 있음)에 대한 참조를 전달합니다. 스크롤 이벤트가 발사 될 때 마다이 기능이 실행됩니다.

처리 크기 조정

우리는 높이와 너비를 계산하기 때문에 일반적인 크기 조정과 함께 방향 변화를 고려해야합니다.

우리는 이벤트 핸들러를 업데이트하여 스크롤과 크기 조정 이벤트를 모두들을 수 있습니다. 이를 통해 방향을 크기를 조정하거나 변경할 때 탐지 기능이 작동 할 수 있습니다.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

또한 jQuery 트리거 방법을 사용하여 DOM이 준비 되 자마자 스크롤 이벤트를 트리거합니다. 우리는 애니메이션해야 할 요소가 뷰포트 내에 있으면 시야와 같이 감지되고 스크롤 된 것처럼 애니메이션이 적용되도록이를 수행합니다.

스크롤 위치 감지

이 예제의 실제 감지 부분은 다음 스크립트에서 나옵니다.
여기서 일어나는 일을 분해하겠습니다.

$<span>window.on('scroll', check_if_in_view);</span>

check_if_in_view 함수는 처음에 DOM이 준비되었을 때와 크기를 조정하거나 스크롤 할 때마다 호출됩니다.

우리는 창의 현재 높이를 상단 및 하단 위치와 함께 얻으므로 우리가보고있는 영역을 알 수 있습니다. 우리는 애니메이션을 할 모든 항목을 찾아서 ($ animation_elements 변수에 저장)를 찾습니다. 이러한 각 요소에 대해 상단 및 하단 위치와 함께 높이를 수집합니다 (따라서 페이지에서 사는 곳을 알고 있습니다). 우리는 각 항목을 비교하여 하단 위치가 창의 상단 위치보다 크지 만 항목의 상단 위치가 창의 맨 아래 위치보다 작습니다.

여기에 시각적 예 가 있습니다

$<span>window.on('scroll resize', check_if_in_view);</span>

높이와 너비를 계산합니다 탐지 함수에서는 물건을 올바르게 계산하기 위해 다양한 요소의 높이와 위치를 가져와야합니다. 여기서 jQuery의 높이 함수를 사용한 곳입니다. 이러한 높이 기능이 어떻게 작동하는지에 대한 고장이 중요합니다

높이 () 및 너비 () 높이 () 및 너비 () 함수는 요소의 높이 또는 너비를 반환합니다. 그들은 모든 패딩, 경계 및 여백을 제외합니다

전체 고장은 높이 또는 너비 문서를 방문하십시오.

innerHeight () 및 innerWidth () 내부 () 및 내부 () 함수는 추가 패딩을 포함하여 요소의 높이 또는 너비를 반환합니다 (그러나 경계와 여백은 모두 제외)

$<span>window.trigger('scroll');</span>

전체 고장은 내부 또는 내부 문서를 방문하십시오.

auterheight () 및 outerwidth () eurterheight () 및 outerwidth () 함수는 요소의 높이 또는 너비를 반환하고 패딩 및 테두리를 포함합니다. . 또한 함수에 True의 값을 전달하여 마진을 포함하도록 지정할 수도 있습니다.

전체 고장을 보려면 외부 해외 또는 외피 문서를 방문하십시오. 스크롤 애니메이션 예제 아래에 나열된 것은 우리가 논의한 것의 기본 사항을 사용하는 일련의 애니메이션입니다. 이 예제는 애니메이션 요소를 찾고 뷰포트 내에있을 때 활성 내 뷰 클래스를 적용합니다.

. 움직이고 자하는 요소는 모두 상대적이거나 절대적으로 위치하는 애니메이션 요소와 같은 표준 클래스가 있어야합니다. 또한 여러 효과를 만들려면 Slide-Left와 같은 해당 클래스를 생성 할 수 있으며,이 클래스는 뷰 내 클래스와 결합 할 수 있습니다. 그런 다음 Animation-Element.slide-left.inview 와 같은 클래스에 변환을 적용해야합니다. 왼쪽에서 슬라이드 첫 번째 예제에서는 뷰포트에 들어갈 때 왼쪽에서 요소를 미끄러 뜨릴 것입니다. 우리는 요소 x 축에서 Translate3D를 사용하여이를 달성합니다.
스크롤의 펜 CSS 애니메이션 참조 - CodePen에서 SitePoint (@SitePoint)로 왼쪽에서 미끄러 져 들어갑니다. 이 예에서는 직원 프로파일을 표시하는 데 사용했지만 필요한 모든 요소로 슬라이드하기 위해 동일한 기능을 다시 레버리지 할 수 있습니다.

바닥에서 이번에는 사용자가 스크롤함에 따라 우리는 요소를 바닥에서 위쪽으로 사라질 것입니다. 우리는 요소의 y 축에서 Translate3D를 통해이를 달성합니다.

이 예에서는 그리드 구조에 주제에 대한 코스 정보를 나열했습니다. 사용자가 아래로 스크롤하면 시점에있는 각 카드가 사라지고 위로 이동하여 코스에 대한 정보를 표시합니다. 스크롤의 펜 CSS 애니메이션 참조 - Codepen의 SitePoint (@SitePoint)에 의해 바닥에서 페이드에서 페이드. 다중 단계 튀는 애니메이션 마지막 예제에는 다단계 애니메이션을 사용합니다. 이를 위해 회전과 번역을 결합한 사용자 정의 키 프레임 애니메이션을 정의합니다. 이 유형의 애니메이션은 귀하의 웹 사이트의 영역을 보여줄 수 있습니다 (이 예를 위해 직원 프로필을 선보입니다).

스크롤의 펜 CSS 애니메이션 참조 - CodePen에서 SitePoint (@SitePoint)에 의해 멀티 단계 이동. 여기서 어디에서 어디에서?

> 여기에서 당신은 당신이 배운 개념을 가져 와서 프로젝트에 적용 할 수 있습니다.

. 이제 요소가 볼 때 감지 할 수 있으므로 대화 형 인터페이스를 만들기 위해 추가 변환 또는 효과를 체인 할 수 있습니다. 예를 들어 요소가 뷰포트에 들어가면 (그리고 변환 후) 제목의 페이딩, 이미지의 스케일링 등의 추가 요소를 변환 할 수 있습니다. 이미 프로젝트에서 이러한 효과를 사용하고 있습니까? 아니면 애니메이션이 과도하게 사용되고 사용자 경험을 방해한다고 생각하십니까? 어느 쪽이든 의견에서 여러분의 의견을 듣고 싶습니다.

Tiffany B. Brown의 책 CSS Master, 2nd Edition을 통해 CSS 기술을 다음 단계로 끌어 올리십시오 - CSS 애니메이션, 전환, 변환 등을 다룹니다. jquery 및 css3 가있는 스크롤 기반 애니메이션에 대한 자주 묻는 질문 (FAQ) jQuery 및 CSS3를 사용하여 스크롤 기반 애니메이션을 작성하기위한 기본 요구 사항은 무엇입니까?

jQuery 및 CSS3을 사용하여 스크롤 기반 애니메이션을 만들려면 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 필요합니다. 또한 프로젝트에 jQuery 라이브러리가 포함되어 있어야합니다. JQuery는 HTML 문서 트래 보이즈, 이벤트 처리 및 애니메이션을 단순화하는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 반면에 CSS3은 계단식 스타일 시트 언어의 최신 진화이며 CSS2.1을 확장하는 것을 목표로합니다. 둥근 모서리, 그림자, 그라디언트, 전환 또는 애니메이션과 같은 오랫동안 기다려온 참신을 많이 가져옵니다.

jQuery 및 CSS3를 사용하여 스크롤 기반 애니메이션을 만들기 시작하려면 어떻게해야합니까? 시작하려면 어떻게 시작할 수 있습니까? 스크롤 기반 애니메이션 생성 먼저 HTML 파일에 jQuery 라이브러리를 포함해야합니다. JQuery 웹 사이트에서 다운로드하거나 CDN (Content Delivery Network)에서 직접 포함시킬 수 있습니다. jQuery가 포함 된 후에는 별도의 .js 파일 또는 HTML 파일의 스크립트 태그 내에 JavaScript 코드를 쓰기 시작할 수 있습니다. 그런 다음 jQuery의 .animate () 메소드를 사용하여 애니메이션을 만들 수 있습니다. CSS3 애니메이션의 경우 키 프레임과 애니메이션 속성을 사용할 수 있습니다.

jQuery에서 스크롤 기반 애니메이션의 속도를 제어 할 수 있습니까?
예, 스크롤 기반 애니메이션의 속도를 제어 할 수 있습니다. jQuery에서. .animate () 메소드는 지속 시간 매개 변수를 수용하여 애니메이션이 실행되는 시간을 결정합니다. 지속 시간은 밀리 초로 지정됩니다. 더 높은 값은 더 빠른 애니메이션이 아니라 더 빠른 애니메이션을 나타냅니다.
스크롤 기반 애니메이션을 더 매끄럽게 만들 수 있습니까?
스크롤 기반 애니메이션을 더 매끄럽게 만들려면 'Ease-In-in'을 사용할 수 있습니다. -OUT 'CSS3 전환 타이밍 기능 속성의 값. 이 값은 애니메이션이 천천히 시작하고 중간에서 가속 한 다음 끝에서 속도를 늦추도록 지정합니다. 이것은 애니메이션에 더 자연스럽고 부드러운 느낌을 줄 수 있습니다.

사용자가 페이지의 특정 지점으로 스크롤 할 때 애니메이션을 트리거 할 수 있습니까?

사용자가 특정 지점으로 스크롤 할 때 jQuery의 .scroll () 메소드를 사용하여 이벤트를 트리거 할 수 있습니다. 페이지. .scroll () 메소드 내에서 .scrolltop () 메소드를 사용하여 스크롤 막대의 현재 수직 위치를 얻을 수 있습니다. 그런 다음 if 문을 사용하여 스크롤 위치가 특정 지점을 넘어서는 지 확인하고 애니메이션을 트리거 할 수 있습니다.

jQuery없이 CSS3 애니메이션을 사용할 수 있습니까? 예, 여러분, 여러분. jQuery없이 CSS3 애니메이션을 사용할 수 있습니다. CSS3은 @keyframes 규칙과 애니메이션 속성을 소개하여 CSS를 사용하여 애니메이션을 만들 수 있습니다. 그러나 jQuery는 사용자 상호 작용을 기반으로 동적으로 변화하는 애니메이션 속성과 같은 애니메이션에 비해 더 많은 제어력과 유연성을 제공 할 수 있습니다.

jQuery에서 스크롤 기반 애니메이션을 어떻게 중지하거나 일시 중지 할 수 있습니까?

.Stop () 메소드를 사용하여 jQuery에서 스크롤 기반 애니메이션을 중지 할 수 있습니다. 이 메소드는 선택한 요소에서 현재 실행중인 애니메이션을 중지합니다. 애니메이션을 일시 중지하려면 jQuery가 기본적으로 애니메이션 일시 정지를 지원하지 않기 때문에 조금 더 복잡합니다. 그러나 플러그인을 사용하거나 애니메이션 상태 및 진행 상황을 수동으로 추적하여이를 달성 할 수 있습니다.

jQuery 및 CSS3를 사용하여 시차 스크롤 효과를 어떻게 만들 수 있습니까? 시차 스크롤링은 배경 이미지가 전경 이미지보다 느리게 이동하여 깊이의 환상을 만듭니다. 페이지 스크롤의 속도와 관련하여 배경 이미지의 움직임 속도를 변경하여 jQuery 및 CSS3을 사용 하여이 효과를 달성 할 수 있습니다. jQuery를 사용하여 여러 CSS 속성을 한 번에 애니메이션 할 수 있습니까?
예, jQuery의 .animate () 메소드를 사용하여 여러 CSS 속성을 한 번에 애니메이션 할 수 있습니다. .animate () 메소드의 속성 객체 매개 변수에 키 값 쌍으로 애니메이션하려는 속성을 포함하면 스크롤 기반 애니메이션이 다른 브라우저에서 어떻게 작동하도록 할 수 있습니까?

위 내용은 jQuery 및 CSS3을 사용하여 스크롤 기반 애니메이션 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!