CSS 무한 슬라이더가 폴라로이드 이미지를 뒤집습니다-CSS 튜토리얼-php.cn

CSS Infinite Slider Flipping Through Polaroid Images 이전 게시물에서, 우리는 원형 방향으로 회전하는 매우 멋진 작은 슬라이더를 만들었습니다 (또는 원한다면 "회전 목마"). 이번에는 폴라로이드 이미지 스택을 통해 뒤집을 수있는 슬라이더를 만들 것입니다.

멋져요? 설명해야 할 것이 많기 때문에 코드를 먼저 보지 마십시오. 나와 함께?

CSS 슬라이더 시리즈

원형 로터리 그림 슬라이더 폴라로이드 그림 페이지 회전

(지금!)

Infinite 3D 슬라이더

기본 설정 이 슬라이더의 HTML과 CSS의 대부분은 지난번에 만든 원형 슬라이더와 유사합니다. 사실, 우리는 똑같은 마커를 사용하고 있습니다 :

이것은 기본 CSS로, 부모

컨테이너를 그리드로 설정하고 모든 이미지가 서로 위에 쌓여 있습니다.

지금까지 복잡한 것은 없습니다. 폴라로이드 스타일 이미지의 경우에도 경계와 그림자 만 사용하고 있습니다. 더 잘할 수 있으므로이 장식 스타일을 자유롭게 시도하십시오! 우리는 대부분의 에너지를 애니메이션에 넣을 것입니다. 이것은 가장 까다로운 부분입니다.

트릭은 무엇입니까? 이 슬라이더의 논리는 이미지의 스태킹 순서에 따라 다릅니다. 예, 를 사용할 것입니다. 모든 이미지는 동일한

값 (2)으로 시작하여 스택의 마지막 이미지를 상단에 놓습니다.

우리는 마지막 이미지를 가져 와서 스택의 다음 이미지가 표시 될 때까지 오른쪽으로 밀어 넣습니다. 그런 다음 이미지의 값은 나머지 이미지보다 낮기 때문에 스택의 마지막 이미지가됩니다.

이것은이 트릭을 보여주는 단순화 된 데모입니다. 애니메이션을 활성화하려면 이미지 위로 마우스를 가져옵니다 이제 모든 이미지에 적용되는 동일한 트릭을 상상해보십시오. 이미지를 구별하기 위해 의사 선택기를 사용하면 이것이 패턴입니다.

우리는 마지막 이미지 (n)를 밀어냅니다. 다음 이미지는 보입니다 (n -1).

우리는 다음 이미지를 밀어 넣습니다 (n -1). 다음 이미지는 보이며 (n -2) 우리는 다음 이미지 (n -2)를 밀어냅니다. 다음 이미지는 보이며 (n -3) (첫 번째 이미지에 도달 할 때까지 동일한 프로세스를 계속합니다)

우리는 첫 번째 이미지 (1)를 밀어냅니다. 마지막 이미지 (N)가 다시 보입니다.

이것은 우리의 무한 슬라이더입니다!

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

로그인 후 복사

해부학 적 애니메이션 이전 게시물을 기억하면 하나의 애니메이션 만 정의하고 각 이미지를 제어하는 데 지연을 사용했습니다. 우리는 여기서도 똑같이 할 것입니다. 먼저 애니메이션의 타임 라인을 시각화 해 보겠습니다. 우리는 세 가지 이미지로 시작하여 모든 숫자 (n) 이미지로 일반화합니다.

우리의 애니메이션은 "스 와이프 오른쪽", "왼쪽 스 와이프"및 "움직이지 않음"의 세 부분으로 나뉩니다. 각 이미지 사이의 지연을 쉽게 식별 할 수 있습니다. 첫 번째 이미지가 0에서 시작되고 지속 시간이 6 초라고 생각하면 두 번째 이미지는 -2s에서 시작하고 세 번째 이미지는 -4s에서 시작됩니다.

우리는 또한 "이동"부분이 전체 애니메이션 (2*100%/3)의 3 분의 2를 차지하는 반면, "스 와이프 오른쪽"및 "스 와이프"부분은 1/3을 차지하므로 각 부분은 총 애니메이션의 100%/6과 같습니다.

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

로그인 후 복사

우리는 다음과 같은 애니메이션 키 프레임을 쓸 수 있습니다

120%는 임의의 값입니다. 100%보다 큰 값이 필요합니다. 이미지는 나머지 이미지에서 바로 아래로 슬라이드해야합니다. 이를 위해서는 크기의 100% 이상을 이동해야합니다. 그렇기 때문에 추가 공간을 얻기 위해 120%를 선택했습니다.

이제 우리는

를 고려해야합니다. 잊지 마십시오. 이미지가 스택에서 나오고 스택의 바닥으로 미끄러지기 전에 이미지의

를 업데이트해야합니다.

<code>.gallery  {
  display: grid;
  width: 220px; /* 控制大小 */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}</code>

로그인 후 복사

타임 라인에서 16.67% (100%/6) 포인트로 상태를 정의하는 대신, 우리는 이미지를 데크로 다시 밀어 내기 전에 이것은 우리 가이 모든 것을 함께 모을 때 일어나는 일입니다 :

글쎄, 슬라이딩 부분은 잘 작동하는 것처럼 보이지만 스태킹 순서는 모두 엉망입니다! 상단의 이미지가 뒷면으로 이동하고 있기 때문에 애니메이션이 잘 시작되지만 후속 이미지는 유지되지 않습니다. 알면 시퀀스의 두 번째 이미지는 다음 이미지가 상단으로 깜박이기 전에 스택의 상단으로 돌아갑니다. z-index 우리는 의 변경 사항을 신중하게 추적해야합니다. 처음에 모든 이미지는 : 2입니다. 이것은 스태킹 순서가 ... 이어야 함을 의미합니다 우리는 세 번째 이미지를 밀어 내고 로 업데이트합니다. z-index 우리는 두 번째 이미지와 똑같이합니다 :

<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>

로그인 후 복사

우리는 이것을했고 모든 것이 괜찮은 것처럼 보였다. 그러나 사실, 이것은 사실이 아닙니다! 첫 번째 이미지가 뒤에서 움직이면 세 번째 이미지는 다른 반복을 시작합니다.

그래서 우리는 실제로 모든 이미지가 전혀 없습니다 : 2! 이미지가 움직이지 않을 때 (즉, 애니메이션의 "모바일"부분) 1입니다. 세 번째 이미지를 밀고 z-index 값을 2에서 1로 업데이트하면 맨 위에 남아 있습니다! 모든 이미지에 동일하게

가 있으면 소스 순서의 마지막 이미지 (이 경우 세 번째 이미지)는 스택의 상단에 있습니다. 세 번째 이미지를 슬라이딩하면 다음과 같은 결과가 나옵니다.

세 번째 이미지는 여전히 맨 위에 있으며, 그 후 애니메이션이 : 2로 다시 시작되면 두 번째 이미지를 상단으로 이동합니다.

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

로그인 후 복사

일단 미끄러지면, 우리는 다음을 얻습니다

첫 번째 이미지가 상단으로 이동합니다 :

<code>.gallery  {
  display: grid;
  width: 220px; /* 控制大小 */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}</code>

로그인 후 복사

좋아요, 길을 잃었어요. 그래서 모든 논리가 잘못 되었습니까?

나는 혼란 스럽다. 그러나 우리의 논리는 완전히 잘못된 것은 아닙니다. 우리는 모든 것이 우리가 원하는 방식으로 작동하게하기 위해 애니메이션을 조금 수정하면됩니다. 트릭은

를 올바르게 재설정하는 것입니다.

<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>

로그인 후 복사

세 번째 이미지가 맨 위에있는 경우를 고려해 봅시다 :

우리는 세 번째 이미지를 미끄러 뜨리고 변경하면

를 변경하면 맨 위에 유지됩니다. 우리가해야 할 일은 두 번째 이미지의 z-index를 업데이트하는 것입니다. 따라서 세 번째 이미지를 데크에서 멀리 밀기 전에 두 번째 이미지 를 2로 업데이트합니다.

다시 말해, 애니메이션이 끝나기 전에 두 번째 이미지의

를 재설정합니다.

<code>@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}</code>

로그인 후 복사

Green Plus 부호는

2로 증가하고 빨간색 마이너스 부호가 : 1과 관련이 있습니다. 두 번째 이미지는 : 2로 시작한 다음 데크에서 미끄러지면 1로 업데이트됩니다. 그러나 첫 번째 이미지가 데크에서 미끄러 져 나오기 전에 두 번째 이미지의 z-index를 다시 2로 변경합니다. 이렇게하면 두 이미지 모두 z-index가 동일하게 유지되지만 DOM에 나중에 나타나기 때문에 세 번째 이미지는 여전히 상단에 있습니다. 그러나 세 번째 이미지가 슬라이드하고 업데이트 된 후 z-index는 바닥으로 이동합니다.

이것은 애니메이션의 3 분의 2이므로 그에 따라 키 프레임을 업데이트합시다.

조금 더 좋지만 여전히 충분하지 않습니다. 또 다른 질문이 있습니다 ... 아뇨, 이것은 결코 끝나지 않을 것입니다! z-index 걱정하지 마십시오.이 문제는 마지막 이미지가 관련 될 때만 발생하므로 키 프레임을 다시 변경하지 않습니다. 마지막 이미지에 대한 "특별한"키 프레임 애니메이션을 만들어 문제를 해결할 수 있습니다.

첫 번째 이미지가 맨 위에 있으면 다음과 같은 상황이 있습니다.

z-index 첫 번째 이미지 이전에 우리가 만든 조정을 고려하면 상단으로 이동합니다. 첫 번째 이미지 이후에 이동하는 다음 이미지는 DOM의 고차 z-index 마지막 z-index 이미지이기 때문에이 경우에만 발생합니다. 나머지 이미지는 N, N -1이기 때문에 양호합니다. 그리고 우리는 3에서 2로, 2에서 1에서 1로갑니다… 그러나 우리는 1에서 N으로갑니다. z-index 이를 피하기 위해 마지막 이미지에 다음 키 프레임을 사용합니다. z-index 우리는 애니메이션이 5/6 (2/3가 아닌 5/6)으로 이동할 때 z-index 값을 재설정하고 첫 번째 이미지는 스택에서 벗어났습니다. 그래서 우리는 어떤 점프도 볼 수 없습니다!

성공! 우리의 무한대 슬라이더는 이제 완벽합니다! 이것은 우리의 최종 코드에 관한 것입니다 :

<code>@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* 我们在这里更新 z-order */
  33.34% { transform: translateX(0%);   z-index: 1; }
  100%   { transform: translateX(0% );  z-index: 1; }  
}</code>

로그인 후 복사

를 지원합니다 이제 우리의 애니메이션은 세 가지 이미지에 대해 작동합니다. 숫자 (n) 이미지에 대해 작동하도록하겠습니다. 그러나 먼저, 우리는 중복성을 피하기 위해 애니메이션을 분할하여 작업을 약간 최적화 할 수 있습니다.

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

로그인 후 복사

코드는 읽고 유지하기가 더 쉽습니다! 우리는 슬라이딩 섹션에 대한 하나의 애니메이션과

업데이트를위한 다른 애니메이션을 만듭니다. 우리는 애니메이션에서 를 사용합니다. 슬라이드 애니메이션과 달리 z-index 이제 코드를 읽고 유지하기가 더 쉽고, 여러 이미지를 지원하는 방법을 더 잘 이해할 수 있습니다. 우리가해야 할 일은 애니메이션 지연 및 키 프레임의 비율을 업데이트하는 것입니다. 이전 게시물에서 만든 동일한 루프를 사용하여 원형 슬라이더에서 여러 이미지를 지원할 수 있기 때문에 지연이 쉽습니다. z-index 이것은 우리가 정상적인 CSS에서 SASS로 이동하고 있음을 의미합니다. 다음으로 타임 라인이 N 이미지로 어떻게 변하는 지 상상해야합니다. 애니메이션은 세 단계로 나뉘어져 있음을 잊지 마십시오 : steps(1) "오른쪽 스 와이프"및 "스 와이프"후에도 이미지의 나머지 이미지가 시퀀스를 완성 할 때까지 이미지가 움직이지 않아야합니다. 따라서 "직접"부분은 "스 와이프"및 "왼쪽 스 와이프"와 같은 (n -1)과 같은 시간이 걸립니다. 한 번 반복하면 N 이미지가 미끄러집니다. 따라서 오른쪽 스 와이프 및 스 와이프는 전체 애니메이션 타임 라인의 100%/N을 설명합니다. 오른쪽 스 와이프 및 스 와이프는 전체 애니메이션 타임 라인의 100%/N을 설명합니다. 이미지는 (100%/n)/2로 스택에서 미끄러 져 100%/n으로 미끄러집니다. z-index 우리는 이것을 바꿀 수 있습니다 :

우리가 n을 3으로 바꾸면 스택에 3 개의 이미지가 있으면 16.67%와 33.33%가됩니다. 스태킹 순서의 논리는 동일합니다.

우리는 여전히 66.33% 포인트를 업데이트해야합니다. 이것은 애니메이션이 끝나기 전에 이미지가

<code>.gallery  {
  display: grid;
  width: 220px; /* 控制大小 */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}</code>

로그인 후 복사

를 재설정하는 곳이어야합니다. 한편, 다음 이미지가 미끄러지기 시작합니다. 슬라이딩 부품에는 100%/n이 필요하므로 재설정은 100%-10%/n : 에서 발생해야합니다.

그러나 우리의

애니메이션이 작동하기 위해서는 나중에 순서에서 발생해야합니다. 마지막 이미지에 대한 수정 사항을 기억하십니까? 첫 번째 이미지가 스택에서 슬라이드를 시작할 때가 아니라 스택에서 벗어날 때 값을 재설정해야합니다. 키 프레임에서 동일한 추론을 사용할 수 있습니다

우리는 끝났다! 5 개의 이미지를 사용할 때 얻은 결과는 다음과 같습니다. 우리는 약간의 스핀을 추가하여 물건을 더 예쁘게 보이게 할 수 있습니다 :

내가 한 일은

속성에

<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>

로그인 후 복사

를 부여하는 것이 었습니다. 루프에서 는 임의 각도를 사용하여 정의합니다.

회전은 때때로 스택 뒤에서 일부 이미지가 점프하는 것을 볼 수 있기 때문에 약간의 실패를 일으킬 수 있지만 중요하지 않습니다.