CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)-CSS 튜토리얼-php.cn

이 글의 내용은 자동 무한 재생 캐러셀 애니메이션 효과를 구현하는 방법입니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

이전 글 [CSS로 이미지 회전 표시 효과를 얻는 방법]에서는 수동 무한 캐러셀 이미지 제작에 대해 소개했습니다. 이번 글에서는 자동 무한 캐러셀 이미지 애니메이션 제작에 대해 살펴보겠습니다. . 애니메이션 효과가 어떻게 구현되는지 살펴보겠습니다.

1. 애니메이션 스테이지 설정

HTML은 이전 기사의 예와 매우 유사합니다. 애니메이션이 실행될 스테이지(#stage), 회전할 div 컨테이너 및 일련의 이미지가 있을 것입니다.

<div id="stage">
     <div id="rotator" style="-webkit-animation-name: rotator;">
          <a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
          <a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)" ></a>
     </div>
</div>

로그인 후 복사

인라인 스타일 속성은 @keyframes 아래의 애니메이션을 참조합니다. JavaScript를 사용하여 애니메이션을 중지하고 다시 시작할 수 있도록 CSS가 아닌 인라인이어야 합니다.

2. 3D 공간에서 사진 정렬

여러 사진을 배치하기 위한 CSS 스타일, 먼저 Y축을 중심으로 회전(페이지를 수직으로 위로 회전)한 다음 방사형 바깥쪽으로 패닝:

  #stage {
    margin: 2em auto 1em 50%;
    height: 140px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 50%;
  }
  #rotator a {
    position: absolute;
    left: -81px;
  }
  #rotator a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
  }
  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    background: #000;
  }
  #rotator a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(n+7) { display: none; }

로그인 후 복사

사진 설정 - 81px A 값 of는 회전축을 중심으로 전면 사진을 중심으로 왼쪽으로의 이동을 나타냅니다. 거리는 이미지 너비(140px/2)의 절반에 LHS 이미지 패딩(10px)과 테두리(1px)를 더한 값입니다.

이 스테이지에서는 3차원 애니메이션을 설정해야 합니다. 스테이지는 페이지 중앙에서 시작하므로 회전 요소 아래의 앵커 요소를 뒤로 이동하여 애니메이션을 중앙에 배치해야 합니다.

왼쪽 3장, 가운데 1장, 오른쪽 2장 총 6장의 사진만 준비하기 시작했습니다. 가장 왼쪽 사진(위치 1)은 왼쪽에서 시작하므로 첫 번째 회전 후에만 표시됩니다.

사진이 회전하면 사라지고(표시: 없음) 새 사진이 왼쪽에 첨부되어 위치 1에서 회전할 준비가 됩니다. 7개 이상의 사진은 원하는 만큼 찍을 수 있습니다. 보이는 위치로 이동할 때만 나타납니다.

애니메이션이 진행되는 동안 Ajax를 사용하여 새 사진을 로드할 수도 있습니다.

3. 애니메이션 효과 추가

이전에 시도해 본 것처럼 사진 휠을 완전히 360도 회전하는 대신 실제로는 30도만 회전하면 됩니다(한 사진에서 다음 사진으로 이동할 수 있을 만큼 충분함).

  @-webkit-keyframes rotator {
    from { -webkit-transform: rotateY(0deg);  }
    to   { -webkit-transform: rotateY(30deg); }
  }
  #rotator {
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
  }
  #rotator:hover {
    -webkit-animation-play-state: paused;
  }

로그인 후 복사

키프레임이 다른 브라우저에서 작동하도록 하려면 모든 스타일을 복사하고 아래 예제 코드 블록에 표시된 대로 -webkit-을 -moz- 및 -ms-로 바꾸세요.

애니메이션이 완료되면 JavaScript 이벤트가 시작됩니다. 이에 대해서는 다음 섹션에서 읽을 수 있습니다. 이벤트 핸들러는 애니메이션이 재설정될 때 사진이 초기 상태로 돌아가는 대신 원을 중심으로 한 단계 이동하도록 사진을 따라 이동합니다.

무슨 일이 일어나고 있는지 더 명확하게 보여주기 위해 아래 데모에서 중앙 사진이 강조 표시되었습니다. 애니메이션이 발생하면 강조 표시된 노드가 회전한 다음 시작 위치로 다시 재설정되는 것을 볼 수 있지만 사진은 다릅니다.

4. 애니메이션 컨트롤러를 추가하는 JavaScript

이 예에서는 휠 재설정을 통해 이동하는 사진을 조정하기 위해 애니메이션이 끝나는 시점을 감지하려면 JavaScript가 필요합니다. 이것이 없으면 휠은 처음 두 사진 사이를 번갈아 가며 나타납니다.

document.addEventListener("DOMContentLoaded", function() {
    var rotateComplete = function() {
      target.style.webkitAnimationName = "";
      target.insertBefore(arr[arr.length-1], arr[0]);
      setTimeout(function(el) {
        el.style.webkitAnimationName = "rotator";
      }, 0, target);
    };
    var target = document.getElementById("rotator");
    var arr = target.getElementsByTagName("a");
    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
}, false);

로그인 후 복사

모든 WebKit 스타일 및 기타 참조에는 Firefox(-moz- 또는 Moz), Opera(-o- 또는 O), 심지어 Internet Explorer(-ms- 또는 ms)에 대한 대안이 있습니다. 표준이 확정될 때까지 함께 생활합니다.

Safari, Chrome, Firefox, Opera 및 Internet Explorer 10에서 이 기능을 사용하려면 다음 추가 설정을 포함해야 합니다.

  var rotateComplete = function() {
    with(target.style) {
      webkitAnimationName = MozAnimationName = msAnimationName = "";
    }
    target.insertBefore(arr[arr.length-1], arr[0]);
    setTimeout(function(el) {
      with(el.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "rotator";
      }
    }, 0, target);
  };
  var target = document.getElementById("rotator");
  var arr = target.getElementsByTagName("a");
  target.addEventListener("webkitAnimationEnd", rotateComplete, false);
  target.addEventListener("animationend", rotateComplete, false);
  target.addEventListener("MSAnimationEnd", rotateComplete, false);

로그인 후 복사

setTimeout이 필요한 이유는 확실하지 않습니다. CSS로 수행되었기 때문에 지연을 설정할 필요는 없지만 setTimeout(0ms라도)이 없으면 애니메이션을 다시 트리거할 수 없습니다.

5. 효과 표시

CSS에서 무한 회전식 애니메이션을 구현하는 방법(코드 예)