CSS Unendlicher und kreisförmig rotierender Bildschieber

Bildschieber (auch Karussells genannt) sind überall. Es gibt viele CSS-Tricks, um den gemeinsamen Schieberegler zu erstellen wo die Bilder von links nach rechts gleiten (oder umgekehrt). Es ist das gleiche Geschäft mit die vielen JavaScript-Bibliotheken da draußen die ausgefallene Schieberegler mit komplexen Animationen erstellen. All das werden wir in diesem Beitrag nicht tun.

In einer kleinen Artikelserie werden wir einige ausgefallene und ungewöhnliche reine CSS-Schieberegler untersuchen. Wenn Sie es leid sind, die gleichen alten klassischen Slider zu sehen, dann sind Sie hier genau richtig!

Für diesen ersten Artikel beginnen wir mit etwas, das ich den „kreisförmig rotierenden Bildschieber“ nenne:

Cool oder? Lassen Sie uns den Code sezieren!

Das HTML-Markup

Wenn Sie meiner Serie von gefolgt sind ausgefallene Bilddekorationen or CSS-Raster und benutzerdefinierte Formen, dann wissen Sie, dass meine erste Regel lautet, mit dem kleinstmöglichen HTML zu arbeiten. Ich bemühe mich immer, CSS-Lösungen zu finden, bevor ich meinen Code mit viel zumülle

s und andere Sachen.

Hier gilt die gleiche Regel – unser Code ist nichts anderes als eine Liste von Bildern in einem Container.

Nehmen wir an, wir arbeiten mit vier Bildern:

Das ist es! Kommen wir nun zum interessanten Teil des Codes. Aber zuerst werden wir uns damit befassen, um die Logik zu verstehen, wie unser Schieberegler funktioniert.

Wie funktioniert es?

Hier ist ein Video, wo ich entferne overflow: hidden aus dem CSS, damit wir besser verstehen können, wie sich die Bilder bewegen:

Es ist, als wären unsere vier Bilder auf einem großen Kreis platziert, der sich gegen den Uhrzeigersinn dreht.

Alle Bilder haben die gleiche Größe (gekennzeichnet durch S in der Figur). Beachten Sie den blauen Kreis, der sich mit der Mitte aller Bilder schneidet und einen Radius (R). Diesen Wert benötigen wir später für unsere Animation. R entspricht 0.707 * S. (Ich werde die Geometrie überspringen, die uns diese Gleichung liefert.)

Lassen Sie uns etwas CSS schreiben!

Wir werden verwenden CSS-Raster um alle Bilder im selben Bereich übereinander zu platzieren:

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

Bisher nichts zu komplexes. Der knifflige Teil ist die Animation.

Wir haben darüber gesprochen, einen großen Kreis zu drehen, aber in Wirklichkeit werden wir jedes Bild einzeln drehen, um die Illusion eines großen rotierenden Kreises zu erzeugen. Lassen Sie uns also eine Animation definieren, m, und wenden Sie es auf die Bildelemente an:

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

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

Der Haupttrick beruht auf dieser hervorgehobenen Linie. Standardmäßig ist das CSS transform-origin Eigenschaft ist gleich center (oder 50% 50%), wodurch sich das Bild um seinen Mittelpunkt dreht, aber dazu brauchen wir es nicht. Wir brauchen das Bild, um sich um die Mitte des zu drehen großer Kreis das unsere Bilder enthält, daher der neue Wert für transform-origin.

Da R gleich ist 0.707 * S, Wir können das sagen R entspricht 70.7% der Bildgröße. Hier ist eine Abbildung, um zu veranschaulichen, wie wir das bekommen haben 120.7% Wert:

Lassen Sie uns die Animation ausführen und sehen, was passiert:

Ich weiß, ich weiß. Das Ergebnis ist weit von dem entfernt, was wir wollen, aber in Wirklichkeit sind wir sehr nah dran. Es sieht vielleicht so aus, als gäbe es dort nur ein Bild, aber vergessen Sie nicht, dass wir alle Bilder übereinander gestapelt haben. Alle drehen sich gleichzeitig und nur das obere Bild ist sichtbar. Was wir brauchen, ist die Animation jedes Bildes zu verzögern, um diese Überlappung zu vermeiden.

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

Es geht schon besser!

Wenn wir den Überlauf auf dem Container ausblenden, sehen wir bereits einen Schieberegler, aber wir werden die Animation ein wenig aktualisieren, damit jedes Bild für eine kurze Zeit sichtbar bleibt, bevor es sich weiterbewegt.

Wir werden unsere Animations-Keyframes aktualisieren, um genau das zu tun:

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

Für jeden 90deg (360deg/4, Wobei 4 ist die Anzahl der Bilder) fügen wir eine kleine Pause ein. Jedes Bild bleibt sichtbar für 5% der Gesamtdauer, bevor wir zum nächsten gleiten (27%-22%, 52%-47%, etc.). Ich werde die aktualisieren animation-timing-function Verwendung eines cubic-bezier() Funktion, um die Animation etwas schicker zu machen:

Jetzt ist unser Slider perfekt! Na ja, fast perfekt, weil uns noch der letzte Schliff fehlt: die bunte kreisförmige Umrandung, die sich um unsere Bilder dreht. Wir können ein Pseudo-Element auf dem verwenden .gallery Wrapper, um es zu machen:

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

Ich habe einen Kreis mit a erstellt sich wiederholender konischer Gradient für den Hintergrund bei Verwendung von a Maskierungstrick das zeigt nur den gepolsterten Bereich. Dann wende ich darauf dieselbe Animation an, die wir für die Bilder definiert haben.

Wir sind fertig! Wir haben einen coolen kreisförmigen Schieberegler:

Lassen Sie uns weitere Bilder hinzufügen

Das Arbeiten mit vier Bildern ist gut, aber es wäre besser, wenn wir es auf eine beliebige Anzahl von Bildern skalieren könnten. Schließlich ist dies der Zweck eines Image-Sliders. Wir sollten überlegen können N Bilder.

Dazu werden wir den Code generischer gestalten, indem wir Sass einführen. Zuerst definieren wir eine Variable für die Anzahl der Bilder ($n) und wir werden jeden Teil aktualisieren, in dem wir die Anzahl der Bilder fest codiert haben (4).

Beginnen wir mit den Verzögerungen:

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

Die Formel für die Verzögerung lautet (1 - $i)*duration/$n, was uns die folgende Sass-Schleife gibt:

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

Wir können die Dauer auch zu einer Variablen machen, wenn wir das wirklich wollen. Aber kommen wir zur Animation:

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

Vereinfachen wir es, um das Muster besser sehen zu können:

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

Der Schritt zwischen jedem Zustand ist gleich 25% - welches ist 100%/4 – und wir fügen a hinzu -90deg Winkel – das ist -360deg/4. Das heißt, wir können unsere Schleife stattdessen so schreiben:

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

Da dauert jedes Bild 5% der Animation ändern wir dies:

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

…mit diesem:

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

Es sollte angemerkt werden, dass 5% ist ein willkürlicher Wert, den ich für dieses Beispiel wähle. Wir können es auch zu einer Variablen machen, um zu steuern, wie lange jedes Bild sichtbar bleiben soll. Ich werde das der Einfachheit halber überspringen, aber als Hausaufgabe können Sie es versuchen und Ihre Implementierung in den Kommentaren teilen!

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

Das letzte Bit ist zu aktualisieren transform-origin. Wir werden einige Geometrietricks brauchen. Unabhängig von der Anzahl der Bilder ist die Konfiguration immer gleich. Wir haben unsere Bilder (kleine Kreise) in einem großen Kreis platziert und müssen den Wert des Radius finden, R.

Sie möchten wahrscheinlich keine langweilige Geometrieerklärung, also finden wir hier, wie wir es finden R:

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

Wenn wir das in Prozent ausdrücken, erhalten wir:

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

…was bedeutet die transform-origin Wert ist gleich:

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

Wir sind fertig! Wir haben einen Schieberegler, der mit beliebig vielen Bildern funktioniert!

Lassen Sie uns neun Bilder hineinwerfen:

Fügen Sie so viele Bilder hinzu, wie Sie möchten, und aktualisieren Sie die $n Variable mit der Gesamtzahl der Bilder.

Wrapping up

Mit ein paar Tricks unter Verwendung von CSS-Transformationen und Standardgeometrie haben wir einen schönen kreisförmigen Schieberegler erstellt, der nicht viel Code erfordert. Das Coole an diesem Schieberegler ist, dass wir uns nicht die Mühe machen müssen, die Bilder zu duplizieren, um die unendliche Animation beizubehalten, da wir einen Kreis haben. Nach einer vollen Drehung kommen wir zurück zum ersten Bild!