Comment implémenter une animation de carrousel infini en CSS (exemple de code)

Le contenu de cet article explique comment réaliser l'effet d'animation de carrousel à lecture infinie automatique. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans l'article précédent [Comment obtenir l'effet d'affichage de rotation des images avec CSS], nous avons présenté la production manuelle d'images carrousel infinies. Dans cet article, nous examinerons. l'animation automatique d'image de carrousel infini. Jetons un coup d'œil à la manière dont l'effet d'animation est obtenu.

1. Définir la scène de l'animation

Le HTML est très similaire à l'exemple de l'article précédent. Nous allons avoir une étape (#stage) où l'animation aura lieu, un conteneur div qui tournera et une série d'images :

<div id="stage">
     <div id="rotator" style="-webkit-animation-name: rotator;">
          <a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
          <a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="Comment implémenter une animation de carrousel infini en CSS (exemple de code)" ></a>
     </div>
</div>

L'attribut de style en ligne fait référence à l'animation ci-dessous @keyframes. Il doit être en ligne plutôt que CSS afin que nous puissions arrêter et redémarrer l'animation à l'aide de JavaScript.

2. Organisez les photos dans l'espace 3D

Le style CSS est utilisé pour positionner plusieurs photos, faites-les d'abord pivoter autour de l'axe y (tournez la page verticalement vers le haut), puis suivez le chemin Pan Outward :

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

Paramètres photo - Une valeur de 81px représente un mouvement vers la gauche, centrant la photo orientée vers l'avant sur l'axe de rotation. La distance est la moitié de la largeur de l'image (140 px/2) plus le remplissage de l'image LHS (10 px) et la bordure (1 px).

Cette étape nécessite la mise en place d'une animation tridimensionnelle. La scène commence au centre de la page, l'élément d'ancrage sous l'élément de rotation doit donc être déplacé vers l'arrière pour centrer l'animation.

Nous n'avons commencé à préparer que six photos, trois à gauche, une au milieu et deux à droite. La photo la plus à gauche (position 1) part de la gauche et n'est donc visible qu'après la première rotation.

Au fur et à mesure que la photo tourne, elle disparaît (Affichage : Aucun) et une nouvelle photo est attachée à gauche, prête à être pivotée depuis la position 1. Aux positions 7 et supérieures, il peut y avoir n'importe quel nombre de photos. Ils n'apparaîtront que lorsqu'ils seront déplacés vers une position visible.

De nouvelles photos peuvent même être chargées en utilisant Ajax pendant que l'animation est en cours.

3. Ajouter des effets d'animation

Comme nous l'avons essayé auparavant, au lieu de faire tourner la roue photo à 360 degrés, tout ce que nous avons fait a été de la faire pivoter de 30 degrés (assez pour passer d'une photo à la suivante) :

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

Pour faire fonctionner les images clés dans d'autres navigateurs, copiez tous les styles, remplacez -webkit- par -moz- et -ms-, comme indiqué dans l'exemple de code bloc ci-dessous.

Une fois l'animation terminée, elle déclenche un événement JavaScript, que vous pourrez découvrir dans la section suivante. Le gestionnaire d'événements se déplace le long de la photo de sorte que lorsque l'animation se réinitialise, au lieu de revenir à l'état initial, la photo se déplace d'un pas autour du cercle.

Pour donner une image plus claire de ce qui se passe, la photo centrale a été mise en évidence dans la démo ci-dessous. Au fur et à mesure que l'animation se produit, vous verrez le nœud en surbrillance tourner puis revenir à la position de départ, mais avec une photo différente.

4. JavaScript Ajouter un contrôleur d'animation

Nous avons besoin de JavaScript dans cet exemple pour détecter la fin de l'animation afin de coordonner le déplacement de la photo lors de la réinitialisation de la roue. Sans cela, la roue alternerait simplement entre les deux premières photos.

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

Pour chaque style WebKit et autre référence, il existe des alternatives à Firefox (-moz- ou Moz), Opera (-o- ou O) et même Internet Explorer (-ms- ou ms) - Le chaos que nous devons endurer jusqu'à ce que les normes soient finalisées.

Pour utiliser cette fonctionnalité dans Safari, Chrome, Firefox, Opera et Internet Explorer 10, nous devons inclure les paramètres supplémentaires suivants :

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

On ne sait pas pourquoi setTimeout est nécessaire. Nous n'en avons pas besoin pour définir le délai car cela se fait avec CSS, mais sans setTimeout (même 0 ms), l'animation ne peut pas être redéclenchée.

5. Affichage des effets

Ceci est juste un carrousel horizontal, dans l'article suivant [CSS réalise trois- effet stéréoscopique dimensionnel Animation de carrousel infini rotatif ] améliorera la méthode du carrousel basée sur cet article et créera différentes animations de carrousel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!