CSS를 사용하여 풀 페이지 애니메이션을 만드는 방법

키 테이크 아웃

CSS 3D 및 2D Transforms 및 CSS 애니메이션을 사용하여 전체 페이지 애니메이션을 만들 수 있으며 웹 컨텐츠 용 기존 스크립트 기반 애니메이션에 대한보다 성능이 뛰어나고 유연한 대안을 제공합니다. HTML 요소는 CSS 애니메이션을 사용하여 이러한 효과를 달성하기 위해 변환 할 수 있습니다. CSS를 적용 할 때 일관된 결과를 보장하려면 내용의 크기에 관계없이 신체 요소의 크기는 브라우저 창의 크기에 고정 될 수 있으며 래퍼 내부에서 내용을 추가 할 수 있습니다. 이 접근법은 또한 복잡한 컨텐츠로 발생할 수있는 진보적 인 렌더링, 재 층 또는 자원로드를 숨길 수 있습니다. > 애니메이션은 브라우징 경험 중에 전략적 시간에 설정하여 페이지가로드 될 때 컨텐츠 전환이 보이거나 사용자가 링크를 클릭 할 때보기가 보이지 않습니다. 페이지 컨텐츠를보기에 전환하는 애니메이션을 설정하는 최적의 장소는 요소 상단의 인라인입니다. 애니메이션 이벤트는 애니메이션이 완료된시기를 감지하고 내비게이션 이벤트를 트리거하는 데 사용될 수 있습니다.

Internet Explorer 10과 같은 최신 브라우저는 CSS 3D 및 2D 변환 및 CSS 애니메이션을 지원합니다. GPU의 힘을 활용하고 일반 JavaScript에서 비동기식으로 실행하면 이러한 기술은 웹 컨텐츠를위한 기존 스크립트 기반 애니메이션에 대한보다 성능이 뛰어나고 유연한 대안을 제공합니다. 나는 CSS 3D 변환과 함께 구축하는 방법과 이전 기사의 CSS 애니메이션 및 전환에 대해 이야기했습니다. 이 기사에서는 내비게이션 프로세스 중에 사용할 수있는 "풀 페이지 애니메이션"의 개념을 설명하여 이러한 기술에 대한 "전통적인"사용 사례를 소개하고 싶습니다. 우리의 목표는 사용자가 페이지를 방문하고 링크를 클릭하거나 관련 조치를 수행 할 때 컨텐츠를 원활하게 볼 때 컨텐츠가 원활하게 나타나는 원활한 브라우징 경험을 달성하는 것입니다.

. 이러한 효과는 CSS 애니메이션을 사용하여 HTML 요소를 변환하여 달성 할 수 있습니다. 그러나이 유스 케이스는 변환에 대한 레이아웃 및 크기 조정의 영향과 시간 페이지 탐색을 적절히 적절히 적절히 제작하는 방법과 같은 토론에 합당하다고 생각되는 몇 가지 고려 사항을 제시합니다. > 이 게시물의 코드 샘플은 IE10 Release Preview에서 지원하는대로 검색되지 않은 CSS 마크 업을 사용합니다. 다른 브라우저는 CSS 애니메이션에 대한 공급 업체 접두사가 필요할 수 있으며 CSS는 사용 된 속성을 변환합니다. 페이지의 전체 내용 변환 CSS 변환은 HTML DOM 요소의 문체 속성에 정의되어 있습니다. 예를 들어, z 축을 따라 요소를 45도 회전시키기위한 마크 업은 다음과 같습니다.

#element {
    transform: rotateZ(45deg);
}

html 문서의 요소에 변환을 첨부하는 것은 정확히 같은 방식으로 작동합니다. 따라서 문서의 에 동일한 효과를 선포하기 위해 다음과 같은 작업을 수행 할 수 있습니다.

신체 요소로 변환을 적용 할 때 페이지의 전 및 후 샷을 보자 :

ROTATEZ (45DEG) 문서의 신체 요소로 변환. 3 차원 변환의 경우 CSS 변환 사양은 우리가 변환하는 요소의 부모에게 지정 될 수있는 관점 속성을 정의합니다. 컨텐츠의 요소를 변환 할 때는 DOM 계층에있는 요소에 적용되어야합니다. 그렇게하는 것은 간단합니다 :

body {
    transform: rotateZ(45deg);
}

요소의 회전 (45deg) 변환과 이것을 결합하면 다음 결과가 생성됩니다.

회전 (45deg)을 전망 : 에 500px로 설정하여 로 변환 우리는 흥미로운 결과를 얻기 위해 신체 요소의 변환-원산지 속성을 조작 할 수 있습니다. 몇 가지 예를 살펴 보겠습니다 위의 마크 업은 변환-오리핀을 사용하여 회전 원점을 요소의 바닥으로 이동시키는 동시에 신체 요소의 X를 따라 회전을 설정합니다. 효과적으로 이것은 문서의 내용을 다음과 같이 "화면으로"회전시킵니다.

html {
    perspective: 500px;
}

우리는 또한 축외 투영 효과를 달성하기 위해 문서의 루트 요소에 관점-원산지 속성을 조작 할 수 있습니다. to : 의 스타일 변경

우리의 페이지는 이제 다음과 같습니다 CSS 변환을 사용하면 페이지 컨텐츠 전체의 시각적 모양을 쉽게 조작 할 수 있습니다. 일반적인 레이아웃 및 크기 규칙은 여전히 ​​적용되므로 일부는 신체 요소 (특히 백분율 값을 사용하거나 변환-오리핀 속성에 의존하는 일부 변환)에서 페이지의 내용에 따라 다른 시각적 효과를 초래할 수 있습니다. Transform-Origin이 50% 100%로 설정된 이전 ROTATEX (45DEG) 예제를 상기하십시오. 아래는 변환 전후의 결과를 볼 수 있습니다.

컨텐츠가 실제로 창 하단에있는 것이 아니라 뷰포트 외부의 어느 시점에 있는지 확인하십시오. CSS 변환에 대한 동작이 예상됩니다. 는 정상적으로 배치 된 다음 화면에있는 바닥 가장자리를 따라 회전합니다. 또한 컨텐츠의 실제 발 인쇄가 확장되었음을 알 수 있습니다 (“After”사진의 스크롤 막대를 살펴보십시오) 변환 된 컨텐츠를 수용하기 위해 (우리가 원근감을 사용하고 있다는 사실 은이 효과가 더욱 효과적입니다. 발음).

그러면 신체 요소에 변환을 적용 할 때 임의로 크기의 콘텐츠를 어떻게 처리합니까? 신체의 크기가 일정량 이상으로 확장되지 않도록 모든 내용을 맞춤 조정하는 사용자 정의는 비현실적 일 수 있습니다. 대신, 간단한 HTML/CSS 패턴을 사용할 수있어 신체 요소의 크기를 브라우저 창의 크기로 고정하고 래퍼 내부의 내용을 추가 할 수 있습니다. 다음 마크 업은 바로 그 달성을 달성합니다

아래 그림은 페이지가 수직으로 스크롤 될 때 발생하는 일을 보여주고 rotatey (45deg)를 문서의 요소로 직접 (왼쪽)로 바꾸고 래퍼 패턴 (오른쪽)을 사용합니다.

변환의 직접적인 적용은 축외 투영으로 인해 비뚤어진 시각적 결과를 초래합니다 (우리는 더 이상 신체 요소의“중심”을보고 있지 않기 때문에). 래퍼 패턴을 사용하면 요소의 원근법-오리핀 속성 (기본적으로 50% 50%)이 항상 요소와 관련하여 올바르게 중앙에 위치하여 즐거운 시각적 효과를 제공합니다. 위의 패턴을 사용하고 CSS를 설정함으로써 가능한 한 백분율 값으로 변환하면 내용의 크기에 관계없이 요소에 일관된 방식으로 영향을 줄 수 있습니다. 변환에서 애니메이션으로 CSS 변환을 적용하는 복잡성을 요소로 정리 한 후 CSS 애니메이션이 다음 단계입니다. 위에서 설명한 원칙을 따르면 웹 컨텐츠를 흥미로운 방식으로보기 (또는보기에서 제거)로 만드는 애니메이션을 만들 수 있습니다. 이 기본 @keyframes 규칙을 고려하십시오 :

#element {
    transform: rotateZ(45deg);
}

요소에 적용되면이 애니메이션은 왼쪽에서 회전하게됩니다. 래퍼 패턴을 사용하는 요소에 적용하면 시각적 결과가 더 흥미 롭습니다. 문서는 실제로 브라우저 창의 가시 영역 외부에서 전체보기로 회전합니다.

마찬가지로, 우리는보기에서 웹 컨텐츠를 유동적으로 제거하는 애니메이션을 구성 할 수 있습니다. 예를 들어, 회전하는 동안 페이지가 거리로 사라지는 경우 다음과 같은 것을 사용할 수 있습니다.

#element {
    transform: rotateZ(45deg);
}

시각적 결과가있는 :

우리는 CSS 애니메이션의 전체 힘을 사용하여 웹 컨텐츠 전체에 영향을 미칠 수 있으므로 이러한 페이지 효과를 생성하는 데있어 많은 유연성이 있습니다 (그리고 CSS 변환을 사용하는 데만 국한되지 않습니다). 그러나 일단 우리가 컨텐츠에 적용하고자하는 효과를 구성한 후에는 페이지 탐색 프로세스 중에 어떻게 트리거되게합니까?

애니메이션 첨부 우리의 목표는 브라우저 경험 중에 전략적 시간에 트리거 애니메이션을 사용하여 페이지가로드 될 때 컨텐츠 전환이 보이고 사용자가 링크를 클릭 할 때보기가 보이지 않습니다. 바디 요소에 애니메이션을 추가 한 최초의 직관적 인 장소는 Onload JavaScript 이벤트입니다. 그러나 결과적으로, Onload Fires시 애니메이션을 추가하는 것은 실제로 너무 늦습니다. 이 이벤트는 실제로 우리 페이지의 컨텐츠 전체가로드 (이미지 또는 기타 대역폭 집약적 리소스 포함)를 완료했을 때 실제로 트리거됩니다. 대역폭 집약적 페이지에 온로드에 애니메이션을 첨부하면 콘텐츠가 "정상적으로"표시되고 애니메이션이 컨텐츠를 트리거하고 리시하는 애니메이션이 나타납니다. 우리가 목표로 삼은 효과는 아닙니다 또는 브라우저가 컨텐츠의 DOM 구조를 구문 분석 할 때 트리거하는 DomContentLoaded 이벤트를 활용할 수 있습니다 (그러나 자원이로드를 마치기 전에 잠재적으로). IE Test Drive DomcontentLoaded 데모는이 두 이벤트의 차이점을 보여줍니다. 그러나 복잡한 웹 컨텐츠의 경우, 최신 브라우저는 "프로그레시브"렌더링을 수행하여 Dom 트리 전체가로드되기 전에 페이지를 표시 할 수 있습니다. 이러한 상황에서 시각적 결과는 Onload 시나리오와 유사합니다. 페이지 컨텐츠를 전환하는 애니메이션을 설정하는 최적의 장소는 요소의 상단에 인라인입니다. 이렇게하면 컨텐츠가 렌더링 될 때 애니메이션이 바로 시작됩니다 (컨텐츠의 시작 위치는 선택한 애니메이션의 키 프레임에서 컨텐츠의 시작 위치가 될 것입니다). 이 접근법의 즐거운 부작용은 애니메이션이 복잡한 콘텐츠로 발생할 수있는 진보적 인 렌더링, 재 층 또는 자원로드를 실제로 숨길 수 있다는 것입니다. 컨텐츠를보기에서 전환하는 애니메이션을 설정하는 것도 흥미 롭습니다. 콜백 함수에서 컨텐츠 (예 : 모든 태그)에 관심있는 모든 관심 요소 (예 : 모든 태그)에 관심있는 모든 관심 요소에 Onclick 핸들러를 첨부 할 수 있다고 가정 할 수 있습니다. . 그러나 실제로 내비게이션이 발생하는 것을 지연시키지 않으면 예상 유체 전환이 보이지 않을 것입니다.

. 이것은 CSS 애니메이션 사양에 설명 된 애니메이션 이벤트를 활용할 수있는 좋은 기회입니다. 특히 AnimationEnd 이벤트를 사용하여 애니메이션이 완료된시기를 감지 한 다음 내비게이션을 트리거 할 수 있습니다 (예 : Window.location.href를 설정하여). 따라서 우리의 onclick은“view-from-view”애니메이션을 트리거하고 에 AnimationEnd에 대한 핸들러를 등록하여 내비게이션 이벤트가 발생할 수 있습니다. 라이브 데모 사용 가능 우리는 CSS 변환 및 애니메이션으로 페이지를 생생하게 가져 오는 데 대한 데모와 튜토리얼을 만들었습니다. 이 자습서 자체는 Windows 8의 Internet Explorer 10에서 작동하는 페이지 탐색 중 전체 페이지 애니메이션과 최근 버전의 Chrome 및 Firefox를 사용합니다. 단순히 페이지 간 애니메이션을 즐기려면 각 페이지의 오른쪽 하단에있는 "계속… 튜토리얼의 끝에서 우리는 자신의 웹 컨텐츠와 함께 이러한 애니메이션을 통합하는 방법에 대한 추가 지침과 샘플 코드를 제공합니다. 포장 CSS 변환 및 CSS 애니메이션은 더 풍부하고 몰입 형 웹 경험을 제공하는 두 가지 강력한 기능 세트입니다. 소량의 노력으로 유동적이고 거의 앱과 같은 내비게이션 경험을 제공하는 웹 페이지 (정적 페이지)를 만들 수 있습니다. 이 게시물을 읽는 것을 좋아한다면 Learnable을 좋아할 것입니다. 주인으로부터 신선한 기술과 기술을 배울 수있는 곳. 회원은 실제 CSS와 같은 모든 SitePoint의 모든 eBook 및 대화식 온라인 과정에 즉시 액세스 할 수 있습니다. 풀 페이지 CSS 애니메이션 에서 자주 묻는 질문이 자주 묻습니다 CSS 애니메이션과 JavaScript 애니메이션의 주요 차이점은 무엇입니까?

CSS 애니메이션과 JavaScript 애니메이션은 웹 요소를 애니메이션하는 것과 동일한 목적으로 사용되지만 몇 가지 주요 차이점이 있습니다. CSS 애니메이션은 특히 간단한 애니메이션의 경우 더 간단하고 구현하기 쉽습니다. 또한 브라우저의 렌더링 엔진이 처리 할 때 성능 친화적입니다. 그러나 CSS 애니메이션은 JavaScript 애니메이션에 비해 제어 및 유연성이 제한적입니다. 반면에 JavaScript 애니메이션은 더 많은 제어력과 유연성을 제공하여 복잡한 애니메이션을 허용합니다. 그들은 실시간으로 일시 중지, 반전 또는 조작 할 수 있으며 사용자 상호 작용에도 응답 할 수 있습니다.

CSS 애니메이션을 반응하게 만드는 방법

CSS 애니메이션을 반응하는 방법은 상대적으로 사용하는 것과 관련이 있습니다. 픽셀과 같은 절대 장치 대신 비율 또는 뷰포트 장치와 같은 단위. 이렇게하면 화면 크기에 관계없이 애니메이션이 제대로 스케일을 보장합니다. 미디어 쿼리를 사용하여 특정 화면 크기 또는 장치 유형을 기반으로 애니메이션을 조정할 수도 있습니다. SVG와 함께 CSS 애니메이션을 사용할 수 있습니까?

예, CSS 애니메이션은 SVG (확장 가능한 벡터 그래픽)와 함께 사용할 수 있습니다. SVG에는 충전, 스트로크 및 변환과 같이 애니메이션 할 수있는 자체 CSS 속성 세트가 있습니다. 이것은 일반 HTML 요소를 애니메이션하는 것과 비교하여보다 복잡하고 흥미로운 애니메이션을 허용합니다.

왜 내 CSS 애니메이션이 일부 브라우저에서 작동하지 않는 이유는 무엇입니까?

모든 브라우저가 모든 CSS 애니메이션 속성을 지원하는 것은 아닙니다. 예를 들어, Internet Explorer는 애니메이션 타이밍 기능 속성을 지원하지 않습니다. 크로스 브라우저 호환성을 보장하려면 애니메이션 속성 전에 -webkit-, -moz-, -o- 및 -ms-와 같은 공급 업체 접두사를 사용할 수 있습니다. AutoPrefixer와 같은 도구를 사용하여 이러한 접두사를 자동으로 추가 할 수 있습니다.

CSS 애니메이션의 성능을 최적화하려면 CSS 애니메이션의 성능을 최적화하려면 수의 수를 제한 할 수 있습니다. 애니메이션 속성, 특히 폭, 높이 및 마진과 같은 레이아웃이 트리거되는 속성. 대신, 변환 및 불투명도와 같은 복합 변경만을 트리거하는 속성을 사용하십시오. 또한 Will-Change 속성을 사용하여 애니메이션 할 가능성이있는 속성에 대해 브라우저에 알릴 수 있습니다.

CSS로 디스플레이 속성을 애니메이션 할 수 있습니까?

아니요. CSS로 애니메이션을하십시오. 값 사이에 중간 상태가 없기 때문입니다. 그러나 불투명도 및 가시성 속성을 애니메이션으로써 비슷한 효과를 얻을 수 있습니다.

CSS로 루핑 애니메이션을 어떻게 만들 수 있습니까?

애니메이션을 사용하여 CSS에서 루핑 애니메이션을 만들 수 있습니다. -문자 수량 속성. 값을 무한대로 설정하면 애니메이션이 무기한으로 반복됩니다.

CSS 애니메이션의 속도를 제어 할 수 있습니까?

예, 애니메이션 시간을 사용하여 CSS 애니메이션의 속도를 제어 할 수 있습니다. 재산. 이 속성은 애니메이션이 한주기를 완료하는 데 걸리는 시간을 정의합니다.

CSS 애니메이션을 어떻게 일시 중지 할 수 있습니까?

애니메이션 플레이 스테이트 속성을 사용하여 CSS 애니메이션을 일시 중지 할 수 있습니다. . 값을 일시 중지로 설정하면 애니메이션이 실행 중지됩니다.

CSS로 백그라운드 이미지 속성을 애니메이션 할 수 있습니까? 그러나 불투명 속성을 사용하여 여러 배경 이미지 사이에서 페이딩하여 유사한 효과를 얻을 수 있습니다.

위 내용은 CSS를 사용하여 풀 페이지 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!