CSS 스크롤 타임 라인을 사용하여 무제한 치수를 슬라이드하십시오-CSS 튜토리얼-php.cn

Slide Through Unlimited Dimensions With CSS Scroll Timelines CSS의 원래 디자인 철학은 그것이 웹 행동 제어를위한 주요 기술이 될 것이라고 상상했으며, 스크립팅 언어는 CSS가 선언적으로 함수를 구현할 수없는 경우에만 대안 일뿐입니다. CSS의 우선 순위 사용 방법론은 "스크립트는 프로그래밍이지만 프로그래밍은 어렵다"는 개념을 기반으로합니다. CSS는 따라서 CSS를 사용하여 스크립트와 같은 동작을 구현하면 "어색한"느낌이 덜되며 새로운 기능과 같은 기능이 나타나는 것은 놀라운 일이 아닙니다. 많은 개발자들은 영리한 시차 스크롤 웹 사이트를 구현 하여이 CSS 기능 "Sprite"를 병에 넣지 못하게합니다. 다음 시차 스크롤 사이트에서 말더듬이 메인 스레드 애니메이션을 원하지 않으면 이제 CSS 해커의 "Dark Side"로 돌아 가야합니다. (농담), 필수 프로그래밍을 선호하는 경우 스크롤 연합 애니메이션을위한 새로운 JavaScript API도 있습니다.

JavaScript 예제를 CSS 로 마이그레이션합니다 시차 스크롤 애니메이션 예제를 수정하고 Chris Coyier 전에 Chris가 사용하는 CSS를 ：hover CSS 코드로 제어하기 위해 CSS를 교체하고 만족스럽게 간단한 JavaScript 코드를 완전히 제거하십시오.

scroll-timeline 매개 변수가없는 함수를 사용하면 "익명 스크롤링 진행 상황 타임 라인"이 설정됩니다. 즉, 우리의 쓰기 모드가 영어 인 경우 수직으로 스크롤 할 수있는 최근 조상 요소를 기반으로 브라우저가 애니메이션됩니다. 불행히도, 특정 요소의 x 축 또는 y 축에서 스크롤 또는 y 축을 스크롤하는 것을 기반으로 애니메이션을 선택하는 것이 매우 유용 할 것입니다. 함수로서 우리는 매개 변수를

로 전달할 수 있으며, 이는 스크롤이 애니메이션을 실행하려는 방식을 더 잘 제어 할 수 있습니다.

다차원 실험 더 나은 것은

속성입니다. 컨테이너 요소에 적용한다는 것은 동일한 지정된 범위를 가진 스크롤 가능한 요소를 기반으로 선택한 조상 요소의 속성을 애니메이션 할 수 있음을 의미합니다. CSS Houdini는 CSS에 애니메이션 친화적이고 상속 가능한 속성을 등록 할 수 있으므로 페이지의 여러 스크롤 가능한 영역을 기반으로 동일한 요소의 애니메이션을 결합 할 수 있습니다. 이것은 아래의 실험과 같은 흥미로운 교육 디자인 가능성의 문을 열어줍니다.

라이트 그린 카드에서 수평 이야기를 스크롤하면 3D NES 콘솔이 수평으로 회전하고 Dark Green Card의 수직 이야기를 스크롤하면 NES 콘솔이 수직으로 회전합니다. 이전 게시물에서, 나는 과거의 CSS 트릭이 항상 CSS와 함께 제한된 가능성을 숨기고 제한된 가능성으로 요약한다고 언급했습니다. 이 롤 기반 실험에 관심이있는 것은 조합의 수직 및 수평 회전의 조합 폭발입니다. 애니메이션 타임 라인은 과거에는 불가능한 순수한 CSS 상호 작용을 제공합니다.

구현 세부 사항은 의 사용 및 사용자 정의 속성만큼 중요하지 않습니다. 우리는 두 가지 사용자 정의 각도 속성을 등록합니다 :

그런 다음 Julian Garner의 Amazing CSS 3D 모델링 응용 프로그램의 예제에서 NES 3D 모델을 "차용"합니다. 우리는

클래스를 업데이트하여 다음과 같이 새로운 변수를 기반으로 3D 회전을합니다. timeline-scope 다음으로 우리는 두 개의 사용자 정의 이름이 지정된 스코어를 제공합니다.

body, .progress, .cube {
  animation-timeline: scroll();
}

로그인 후 복사

여러 범위를 전달하는 것에 대한 공식 문서가 보이지 않지만 Google Chrome 및 Edge에서 작동합니다. 공식적으로 지원되는 기능이 아니라면 매우 편리하기 때문에 표준의 일부가되기를 바랍니다.

다음, 우리는 두 개의 스크롤 가능한 카드의 이름이 지정된 타임 라인과 애니메이션을 트리거하려는 축을 정의합니다. .scene

및 장면에 애니메이션을 추가하십시오 :

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

로그인 후 복사

3D 모델은 문서 본문의 X 및 Y 각도를 상속 받기 때문에 스크롤 카드는 이제 수직 및 수평 각도 변경의 조합으로 모델을 회전시킵니다.

스크롤 바를 넘어서 사용자 제어 애니메이션 body 그것에 대해주의 깊게 생각하십시오.이 동작은 스크롤 구동 애니메이션에만 유용 할뿐만 아니라. 위의 실험에서, 우리는 스크롤 가능한 영역을 3D 모델의 특성을 제어하기 위해 슬라이더로 더 많이 사용합니다. 작업을 마친 후, 나는 산책하러 나갔고 실제 범위 입력이 애니메이션 타임 라인을 제어 할 수 있다면 얼마나 멋진 지에 환상적이었습니다. 그런 다음 그들이 할 수 있다는 것을 알았습니다! 적어도 크롬에서. 순수한 CSS CMS? scroll-scope Julian Garner에서 3D 모델을 요청하는 동안 범위 입력을 사용하여 X-Wing 모델을 제어 할 수 있는지 살펴 보겠습니다.

우리는 단순히 CSS를 사용 하여이 작업을 수행 할 수 있다는 사실을 알고 있으며 여러 속성으로 수행 할 수 있습니다. 나에게는 충분하지 않습니다. 애니메이션 타임 라인을 조작 할 수있는 다른 입력 컨트롤을보고 싶습니다. 텍스트 필드가 애니메이션을 채울 때 애니메이션을 누르거나 버튼이 애니메이션을 재생하거나 반전시킬 수 있다고 상상해보십시오. 후자는

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

로그인 후 복사

pseudo 클래스와

속성을 결합하여 어느 정도 구현 될 수 있습니다. 그러나 내 경험상, 여러 사용자 정의 속성을 애니메이션하기 위해 브라우저를 사용하려고 할 때 브라우저가 혼란 스러울 수 있습니다. 대조적으로, 애니메이션 타임 라인은이 유스 케이스를 염두에두고 설계되었으므로 원활하고 정확히 예상했던 것입니다.

나는이 신흥 CSS 기능의 잠재력을 알아 차린 유일한 사람이 아닙니다. 누군가는

와 체크 박스 트릭을 결합 하여이 영리한 운명 클론을 구현했습니다. 내 문제는 여전히 충분하지 않다는 것입니다. 크롬에는 스크롤 바 및 범위 입력을 게임 컨트롤로 사용하여 아바타 빌더를 구현하기에 충분한 리소스가 있습니다. 나는 scroll-timeline 기능이 나타나기 전에 시대에 전례없는 예측할 수없는 복잡한 경험을 시도하게되어 기쁩니다. 결국, 당신이 외계인에게 비디오 게임의 정의를 설명해야한다면, 그것이 단지 대화 형 애니메이션이라고 말하지 않습니까? scroll-timeline

위 내용은 CSS 스크롤 타임 라인을 사용하여 무제한 치수를 슬라이드하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!