Nur mit CSS unendliche Scroll-Karussell-Animation

Einführung#

Wir lieben JavaScript, natürlich. Aber es macht immer Spaß zu sehen, was man nur mit CSS erreichen kann - besonders wenn es um Animationen geht, da CSS-Animationen oft "weniger schwer" als JavaScript-Animationen sind.

In diesem Beitrag zeige ich dir, wie du eine unendliche Scroll-Karussell-Animation mit Pause bei Hover-Effekt nur mit CSS erstellst. Hier ist eine Vorschau dessen, was wir bauen werden:

Erzeuge eine Reihe von Karten#

Lass uns zuerst die Grundstruktur unseres Karussells erstellen. Betrachte eine Reihe von Karten:

Sieht gut aus, oder? Die Karten können deine schicken Banner, Produktbilder oder alles sein, was du in deinem Karussell präsentieren möchtest.

Verdoppel die Karten#

Da wir wollen, dass das Karussell unendlich ist, sollte es übergangslos verbunden sein. Instinktiv könnten wir versuchen, die Karten zu wiederholen:

Schau dir das Ergebnis an:

Nur das erste Karten-Set ist sichtbar. Wenn du den HTML-Code überprüfst, wirst du sehen, dass das zweite Karten-Set versteckt ist und dem ersten Set folgt.

Das Karussell animieren#

Zeit, das Karussell zu animieren! Da wir zwei verbundene Karten-Sets haben, können wir das Karussell animieren, indem wir die Kartengruppen transformieren. So geht's:

Wir haben noch einen letzten Schliff hinzuzufügen: das Anhalten der Animation, wenn man über das Karussell schwebt. Dies gibt den Nutzern die Möglichkeit, den Inhalt besser zu sehen. Da wir zwei Kartensets haben, müssen wir beide Gruppen anhalten, wenn wir über das Karussell schwebt:

Das war's! 🎊 Nun wird das Karussell anhalten, wenn du mit der Maus darüber fährst.

Abschließende Gedanken#

CSS ist mächtig, und es macht immer Spaß zu erkunden, was man damit erreichen kann. Es gibt auch andere CSS-Eigenschaften wie scroll-snap-type und scroll-snap-align, die dir helfen können, ein interaktives Karussell zu erstellen. Viel Spaß beim Programmieren! 🚀