CSS 무한 및 원형 회전 이미지 슬라이더

플라톤에 의해 재발행

팔로워 : 0

이미지 슬라이더(캐러셀이라고도 함)는 어디에나 있습니다. 있다 일반적인 슬라이더를 만드는 많은 CSS 트릭 여기서 이미지는 왼쪽에서 오른쪽(또는 그 반대)으로 미끄러집니다. 와 같은 거래입니다 밖에 있는 많은 JavaScript 라이브러리 복잡한 애니메이션으로 멋진 슬라이더를 만듭니다. 우리는 이 게시물에서 그 어떤 것도 하지 않을 것입니다.

일련의 기사를 통해 멋지고 흔하지 않은 CSS 전용 슬라이더를 탐색할 것입니다. 똑같은 클래식 슬라이더를 보는 것이 지겹다면 제대로 찾아오셨습니다!

CSS 슬라이더 시리즈

이 첫 번째 기사에서는 "원형 회전 이미지 슬라이더"라고 부르는 것으로 시작합니다.

멋지죠? 코드를 분석해 봅시다!

HTML 마크업

내 시리즈를 따라했다면 멋진 이미지 장식 or CSS 그리드 및 사용자 정의 모양, 내 첫 번째 규칙은 가능한 가장 작은 HTML로 작업하는 것임을 알고 있습니다. 저는 항상 코드를 복잡하게 만들기 전에 CSS 솔루션을 찾기 위해 열심히 노력합니다.

s와 다른 것들.

동일한 규칙이 여기에도 적용됩니다. 우리의 코드는 컨테이너에 있는 이미지 목록에 불과합니다.

XNUMX개의 이미지로 작업한다고 가정해 보겠습니다.

그게 다야! 이제 코드의 흥미로운 부분으로 이동하겠습니다. 그러나 먼저 슬라이더 작동 방식의 논리를 이해하기 위해 이에 대해 자세히 살펴보겠습니다.

어떻게 진행합니까?

제거하는 영상입니다 overflow: hidden 이미지가 어떻게 움직이는지 더 잘 이해할 수 있도록 CSS에서:

네 개의 이미지가 시계 반대 방향으로 회전하는 큰 원에 배치된 것과 같습니다.

CSS 무한 및 원형 회전 이미지 슬라이더

모든 이미지의 크기는 동일합니다(로 표시됨). S 그림에서). 모든 이미지의 중심과 교차하고 반경(R). 나중에 애니메이션에 이 값이 필요합니다. R 동일하다 0.707 * S. (나는 우리에게 그 방정식을 제공하는 기하학을 건너뛸 것입니다.)

CSS를 작성해 봅시다!

우리는 사용할 것입니다 CSS 그리드 동일한 영역에 모든 이미지를 서로 위에 배치하려면 다음을 수행하십시오.

.gallery  {
  --s: 280px; /* control the size */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

지금까지 너무 복잡한 것은 없습니다. 까다로운 부분은 애니메이션입니다.

우리는 큰 원을 회전시키는 것에 대해 이야기했지만 실제로는 각 이미지를 개별적으로 회전하여 큰 회전하는 원의 환영을 만듭니다. 애니메이션을 정의해 보겠습니다. m, 이미지 요소에 적용:

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

주요 트릭은 강조 표시된 줄에 의존합니다. 기본적으로 CSS transform-origin 속성은 다음과 같습니다. center (또는 50% 50%) 이미지가 중심을 중심으로 회전하게 하지만 그렇게 할 필요는 없습니다. 이미지의 중심을 중심으로 회전하려면 이미지가 필요합니다. 큰 원 이미지를 포함하므로 에 대한 새로운 값 transform-origin.

R이 같기 때문에 0.707 * S, 우리는 말할 수 있습니다 R 동일하다 70.7% 이미지 크기의. 다음은 우리가 어떻게 120.7% 값 :

CSS 무한 및 원형 회전 이미지 슬라이더 PlatoBlockchain 데이터 인텔리전스. 수직 검색. 일체 포함. — CSS 무한 및 원형 회전 이미지 슬라이더

애니메이션을 실행하고 무슨 일이 일어나는지 봅시다:

내가 알지. 결과는 우리가 원하는 것과는 거리가 멀지만 실제로는 매우 가깝습니다. 이미지가 하나만 있는 것처럼 보일 수 있지만 모든 이미지가 서로 겹쳐져 있다는 것을 잊지 마십시오. 모두 동시에 회전하고 상단 이미지만 보입니다. 우리에게 필요한 것은 이러한 중첩을 피하기 위해 각 이미지의 애니메이션을 지연시키는 것입니다.

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

상황은 이미 좋아지고 있습니다!

컨테이너에서 오버플로를 숨기면 이미 슬라이더를 볼 수 있지만 각 이미지가 이동하기 전에 짧은 시간 동안 표시되도록 애니메이션을 약간 업데이트합니다.

이를 위해 애니메이션 키프레임을 업데이트할 것입니다.

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

각각 90deg (360deg/4어디로 4 는 이미지 수) 약간의 일시 중지를 추가합니다. 각 이미지는 다음 기간 동안 계속 표시됩니다. 5% 다음 항목으로 슬라이드하기 전의 전체 기간(27%-22%, 52%-47%, 등.). 을 업데이트하겠습니다. animation-timing-function 를 사용하여 cubic-bezier() 애니메이션을 조금 더 멋지게 만드는 기능:

이제 슬라이더가 완벽합니다! 음, 이미지 주위를 회전하는 다채로운 원형 테두리인 최종 터치가 아직 없기 때문에 거의 완벽합니다. 가상 요소를 사용할 수 있습니다. .gallery 그것을 만드는 래퍼 :

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.gallery::after,
.gallery >img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

로 원을 만들었습니다. 원추형 구배 반복 a를 사용하는 동안 배경 마스킹 트릭 패딩 영역 만 표시합니다. 그런 다음 이미지에 대해 정의한 것과 동일한 애니메이션을 적용합니다.

끝났습니다! 멋진 원형 슬라이더가 있습니다.

더 많은 이미지를 추가하자

XNUMX개의 이미지로 작업하는 것도 좋지만 여러 이미지로 확장할 수 있다면 더 좋을 것입니다. 결국 이것은 이미지 슬라이더의 목적입니다. 우리는 고려할 수 있어야 합니다 N 이미지.

이를 위해 Sass를 도입하여 코드를 보다 일반적으로 만들 것입니다. 먼저 이미지 수에 대한 변수를 정의합니다($n) 이미지 수를 하드 코딩한 모든 부분을 업데이트합니다(4).

지연부터 시작하겠습니다.

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

지연 공식은 다음과 같습니다. (1 - $i)*duration/$n, 다음과 같은 Sass 루프를 제공합니다.

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

정말로 원한다면 기간을 변수로 만들 수도 있습니다. 그러나 애니메이션으로 넘어 갑시다.

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% {transform: rotate(-360deg); }
}

패턴을 더 잘 볼 수 있도록 단순화해 보겠습니다.

@keyframes m {
  0% { transform: rotate(0); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

각 상태 사이의 단계는 다음과 같습니다. 25% — 이것은 100%/4 — 그리고 우리는 -90deg 각도 — -360deg/4. 즉, 대신 다음과 같이 루프를 작성할 수 있습니다.

@keyframes m {
  0% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  100% { transform: rotate(-360deg); }
}

각각의 이미지가 걸리기 때문에 5% 애니메이션에서 다음과 같이 변경합니다.

#{($i / $n) * 100}%

… 이것으로:

#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%

그것은 주목해야한다. 5% 이 예제에서 선택한 임의의 값입니다. 또한 각 이미지가 표시되는 시간을 제어하는 변수로 만들 수 있습니다. 단순함을 위해 건너뛰겠지만, 숙제를 위해 해보고 댓글에서 구현을 공유할 수 있습니다!

@keyframes m {
  0%,3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  98%,100% { transform: rotate(-360deg); }
}

마지막 비트는 업데이트하는 것입니다 transform-origin. 기하학 트릭이 필요합니다. 이미지의 수에 관계없이 구성은 항상 동일합니다. 이미지(작은 원)를 큰 원 안에 배치하고 반지름 값을 찾아야 합니다. R.

당신은 아마 지루한 기하학 설명을 원하지 않을 것이므로 우리가 찾는 방법은 다음과 같습니다. R:

R = S / (2 * sin(180deg / N))

이를 백분율로 표현하면 다음과 같습니다.

R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)

...즉, transform-origin 값은 다음과 같습니다.

transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);

끝났어! 모든 숫자 이미지와 함께 작동하는 슬라이더가 있습니다!

거기에 XNUMX개의 이미지를 던져봅시다:

원하는 만큼 이미지를 추가하고 $n 총 이미지 수로 변수.

최대 포장

CSS 변환과 표준 지오메트리를 사용하는 몇 가지 트릭으로 많은 코드가 필요하지 않은 멋진 원형 슬라이더를 만들었습니다. 이 슬라이더의 멋진 점은 원이 있기 때문에 무한 애니메이션을 유지하기 위해 이미지를 복제할 필요가 없다는 것입니다. 전체 회전 후 첫 번째 이미지로 돌아갑니다!

타임 스탬프 : 2022 년 12 월 2 일2022 년 12 월 2 일