So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)

Der Inhalt dieses Artikels ist, wie man den automatischen Karussell-Wiedergabeeffekt realisiert. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Im vorherigen Artikel [So erzielen Sie den Rotationsanzeigeeffekt von Bildern mit CSS] haben wir die Erstellung manueller unendlicher Karussellbilder vorgestellt. In diesem Artikel werden wir einen Blick darauf werfen die automatische unendliche Karussell-Bildanimation. Schauen wir uns an, wie der Animationseffekt erzielt wird.

1. Stellen Sie die Animationsphase ein

HTML ist dem Beispiel im vorherigen Artikel sehr ähnlich. Wir werden eine Bühne (#stage) haben, in der die Animation stattfinden wird, einen Div-Container, der sich dreht, und eine Reihe von Bildern:

<div id="stage">
     <div id="rotator" style="-webkit-animation-name: rotator;">
          <a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
          <a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="So implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel)" ></a>
     </div>
</div>

Das Inline-Stilattribut verweist auf die Animation unter @keyframes. Es muss Inline statt CSS sein, damit wir die Animation mithilfe von JavaScript stoppen und neu starten können.

2. Fotos im 3D-Raum anordnen

Der CSS-Stil wird verwendet, um mehrere Fotos zu positionieren. Drehen Sie sie zunächst um die y-Achse (drehen Sie die Seite vertikal nach oben). und folgen Sie dann dem Pfad „Nach außen schwenken“:

  #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; }

Fotoeinstellungen – Ein Wert von 81 Pixel stellt eine Bewegung nach links dar, bei der das nach vorne gerichtete Foto auf der Drehachse zentriert wird. Der Abstand beträgt die Hälfte der Bildbreite (140 Pixel/2) plus den linken Bildabstand (10 Pixel) und den Rand (1 Pixel).

Diese Phase erfordert das Einrichten einer dreidimensionalen Animation. Die Phase beginnt in der Mitte der Seite, daher muss das Ankerelement unter dem Rotationselement nach hinten verschoben werden, um die Animation zu zentrieren.

Wir haben erst mit der Vorbereitung von sechs Fotos begonnen, drei links, eines in der Mitte und zwei rechts. Das Foto ganz links (Position 1) beginnt von links und ist daher erst nach der ersten Drehung sichtbar.

Während sich das Foto dreht, verschwindet es (Anzeige: Keine) und links wird ein neues Foto angehängt, das von Position 1 aus gedreht werden kann. Ab Position 7 können beliebig viele Fotos stehen. Sie werden erst angezeigt, wenn sie an eine sichtbare Position verschoben werden.

Mit Ajax können sogar neue Fotos geladen werden, während die Animation läuft.

3. Animationseffekte hinzufügen

Wie wir es zuvor versucht haben, haben wir das Fotorad nicht um ganze 360 ​​Grad gedreht, sondern nur um 30 Grad gedreht ( genug). um von einem Foto zum nächsten zu wechseln):

  @-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;
  }

Damit Keyframes in anderen Browsern funktionieren, kopieren Sie alle Stile und ersetzen Sie -webkit- durch -moz- und -ms- wie unten. Der Beispielcodeblock wird angezeigt.

Wenn die Animation abgeschlossen ist, wird ein JavaScript-Ereignis ausgelöst, über das Sie im nächsten Abschnitt lesen können. Der Ereignishandler bewegt sich entlang des Fotos, sodass sich das Foto beim Zurücksetzen der Animation einen Schritt um den Kreis bewegt, anstatt in den Ausgangszustand zurückzukehren.

Um ein klareres Bild davon zu vermitteln, was vor sich geht, wurde das mittlere Foto in der Demo unten hervorgehoben. Während die Animation ausgeführt wird, sehen Sie, wie sich der hervorgehobene Knoten dreht und dann in die Ausgangsposition zurückgesetzt wird, jedoch mit einem anderen Foto.

4. JavaScript-Animationscontroller hinzufügen

In diesem Beispiel benötigen wir JavaScript, um zu erkennen, wann die Animation endet, um die Bewegung des Fotos durch das Rad-Reset zu koordinieren. Ohne dies würde das Rad nur zwischen den ersten beiden Fotos wechseln.

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);

Für jeden WebKit-Stil und jede andere Referenz gibt es Alternativen zu Firefox (-moz- oder Moz), Opera (-o- oder O) und sogar Internet Explorer (-ms- oder ms) – wir Das Chaos, das bis zur endgültigen Festlegung der Standards ausgehalten werden muss.

Um diese Funktion in Safari, Chrome, Firefox, Opera und Internet Explorer 10 nutzen zu können, müssen wir die folgenden zusätzlichen Einstellungen einschließen:

  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);

Es ist nicht klar, warum setTimeout benötigt wird. Wir brauchen es nicht, um die Verzögerung festzulegen, da dies mit CSS geschieht, aber ohne setTimeout (sogar 0 ms) kann die Animation nicht erneut ausgelöst werden.

5. Effektanzeige

Im folgenden Artikel realisiert CSS drei- dimensionaler stereoskopischer Effekt Durch die Drehung einer unendlichen Karussellanimation ] wird die Karussellmethode basierend auf diesem Artikel verbessert und verschiedene Karussellanimationen erstellt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine unendliche Karussellanimation in CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!