CSS INFINITE ET CIRCULAIR ROTATION IMAGE CULIRE

Le curseur d'image (également connu sous le nom de carrousel) est disponible partout. Il y a beaucoup d'astuces CSS pour créer des curseurs communs où l'image glisse de gauche à droite (ou vice versa). De nombreuses bibliothèques JavaScript créent également de beaux curseurs avec des animations complexes. Dans cet article, nous ne ferons aucune de ces choses.

Nous explorerons des curseurs CSS purs fantaisistes et rares à travers une série d'articles. Si vous en avez assez de voir le même curseur classique, vous êtes au bon endroit!

CSS Slider Series

• Cycle Rotation Picture Slider (votre position actuelle)
• parcourir les images Polaroid
• Slière 3D infinie

Dans le premier post, nous commencerons par ce que j'appelle le "curseur de l'image de rotation de boucle":

C'est cool, non? Analysons le code!

Structure HTML

Si vous avez suivi ma série sur de belles grilles de décoration d'images ou CSS et de formes personnalisées, vous saurez que ma première règle est d'utiliser le moins de HTML possible. J'ai toujours du mal à trouver une solution CSS, puis à gâcher le code avec beaucoup de <div> et d'autres choses. Les mêmes règles s'appliquent ici - notre code n'est rien de plus qu'une série d'images dans le conteneur. <p> Supposons que nous utilisons quatre images: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt; &lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> c'est tout! Passons maintenant à la partie intéressante du code. Mais d'abord, nous allons y creuser pour comprendre la logique du fonctionnement de nos curseurs. </p> <h3> Comment travailler? </h3> <p> Il s'agit d'une vidéo, à partir de laquelle j'ai supprimé le <code>overflow: hidden CSS afin que nous puissions mieux comprendre comment l'image bouge: (la vidéo doit être intégrée ici, mais comme je ne peux pas gérer la vidéo, je le décrirai dans le texte) La vidéo montre quatre images tournant dans le sens antihoraire sur un grand cercle. Toutes les images sont de la même taille (représentées par S sur la figure). Remarquez le cercle bleu, qui est le cercle qui coupe les centres de toutes les images et a un rayon (R). Nous aurons besoin de cette valeur pour notre animation plus tard. R est égal à 0,707 * S. (Je sauterai les calculs géométriques compte tenu de l'équation.)

Écrivons des CSS!

Nous utiliserons une grille CSS pour placer toutes les images dans la même zone les unes des autres:

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Jusqu'à présent, rien n'est trop compliqué. La partie délicate est l'animation.

Nous avons discuté de la rotation d'un grand cercle, mais en réalité, nous ferons tourner chaque image individuellement, créant l'illusion d'un grand cercle rotatif. Alors définissons une animation m et appliquons-la à l'élément d'image:

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

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

L'astuce principale consiste à mettre en évidence les lignes. Par défaut, la propriété CSS transform-origin est égale au centre (ou 50% 50%), ce qui fait tourner l'image autour de son centre, mais nous n'avons pas besoin de le faire. Nous avons besoin que l'image tourne autour du centre du grand cercle contenant notre image, donc la nouvelle valeur de transform-origin.

S Puisque R est égal à 0,707 * S, nous pouvons dire que R est égal à 70,7% de la taille de l'image. Voici un graphique pour illustrer comment nous obtenons une valeur de 120,7%: (l'image doit être intégrée ici, mais comme je ne peux pas gérer l'image, je le décrirai dans le texte) L'image montre la relation géométrique du calcul de la valeur d'origine transformateur.

exécutons l'animation et voyons ce qui se passe: (l'effet d'animation doit être intégré ici, mais comme je ne peux pas gérer l'animation, je vais le décrire dans le texte) L'effet d'animation montre qu'une seule image est visible parce que toutes les images sont superposées ensemble.

Nous devons retarder l'animation de chaque image pour éviter ce chevauchement.

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

La situation s'est améliorée!

Si nous cachons un débordement sur le conteneur, nous pouvons déjà voir un curseur, mais nous mettrons à jour légèrement l'animation afin que chaque image soit visible pendant une courte période avant de déménager.

Nous mettrons à jour nos images clés d'animation pour ce faire:

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Pour chaque 90deg (360Deg / 4, où 4 est le nombre d'images), nous ajouterons une petite pause. Chaque image restera 5% de la durée totale de la durée visible (27% -22%, 52% -47%, etc.) avant de glisser vers l'image suivante. Je mettrai à jour cubic-bezier() avec la fonction animation-timing-function pour rendre l'animation plus belle: (l'effet d'animation doit être intégré ici, mais comme je ne peux pas gérer l'animation, je l'omettre)

Maintenant, notre curseur est parfait! Eh bien, presque parfait, car il nous manque toujours la retouche finale: les bordures arrondies colorées qui tournent autour de notre image. Nous pouvons le créer en utilisant des pseudo-éléments sur le .gallery wrapper:

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

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

J'ai créé un cercle avec des gradients coniques répétés comme arrière-plan, tout en utilisant une astuce de masquage qui affiche uniquement la zone de remplissage. Ensuite, j'y applique la même animation définie pour l'image. (Les effets d'animation doivent être intégrés ici, mais comme je ne peux pas gérer l'animation, je vais l'omettre)

Nous avons terminé! Nous avons un curseur de boucle cool:

ajoutons plus d'images

Il est bon d'utiliser quatre images, mais c'est encore mieux si nous pouvons l'étendre à un certain nombre d'images. Après tout, c'est le but du curseur d'image. Nous devrions être en mesure de considérer n images.

Pour ce faire, nous rendrons le code plus général en introduisant SASS. Tout d'abord, nous définissons une variable pour le nombre d'images ($ n) et nous mettrons à jour chaque partie de notre nombre d'images codé en dur (4).

Commençons par le retard:

.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 */

La formule de retard est (1 - $ i) * durée / $ n, qui nous donne la boucle SASS suivante:

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

Nous pouvons également faire de la durée une variable si nous le voulons vraiment. Mais continuons à l'animation:

.gallery {
  padding: calc(var(--s) / 20); /* 此处需要填充 */
  position: relative;
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* 继承相同的填充 */
  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);
}

Simplifions-le pour mieux afficher le motif:

.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 */

La taille de pas entre chaque état est égale à 25% - c'est-à-dire à 100% / 4 - nous ajoutons un angle de -90 degrés - c'est-à-dire -360 deg / 4. Cela signifie que nous pouvons écrire la boucle comme ceci:

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

Étant donné que chaque image représente 5% de l'animation, nous changeons ceci:

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

… et ceci:

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

Il convient de noter que 5% est toute valeur que j'ai sélectionnée pour cet exemple. Nous pouvons également le définir en tant que variable pour contrôler la durée de la durée de chaque image. Je vais ignorer cela pour simplifier, mais en tant que devoirs, vous pouvez essayer de le faire et partager votre implémentation dans les commentaires!

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Le dernier point est de mettre à jour transform-origin. Nous aurons besoin de quelques compétences géométriques. La configuration est toujours la même quel que soit le nombre d'images. Nous plaçons l'image (petit cercle) à l'intérieur d'un grand cercle et nous devons trouver la valeur du rayon R.

Vous ne voudrez peut-être pas une explication géométrique ennuyeuse, alors voici comment trouver r:

.gallery > img {
  /* 与之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

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

Si nous exprimons cela en pourcentage, nous obtenons:

.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 */

… Cela signifie que la valeur transform-origin équivaut:

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

Nous avons terminé! Nous avons un curseur pour un certain nombre d'images!

Ajoutons neuf images là-bas: (L'effet de curseur de neuf images doit être intégré ici, mais comme je ne peux pas gérer des images et des animations, je l'omettrai)

Ajoutez autant d'images et mettez à jour la variable $ n avec le nombre total d'images.

Résumé

Avec plusieurs astuces d'utilisation de la transformation CSS et de la géométrie standard, nous avons créé un joli curseur de boucle sans trop de code. Ce qui est cool à propos de ce curseur, c'est que nous n'avons pas à prendre la peine de copier l'image pour garder l'animation infinie parce que nous avons un cercle. Après la rotation complète, nous reviendrons à la première image!