Deutsch

css
animation
unendlich-scrollen
karussell

Nur mit CSS unendliche Scroll-Karussell-Animation

Erzeuge eine unendliche Scroll-Karussell-Animation mit Pause bei Hover nur unter Verwendung von CSS. Kein JavaScript erforderlich.

Gao

Founder

8/11/2024

Verschwenden Sie keine Wochen mit Benutzerauthentifizierung

Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.

Jetzt starten

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! 🚀

Einführung

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:

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:

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

Einführung#

Erzeuge eine Reihe von Karten#

Verdoppel die Karten#

Das Karussell animieren#

Abschließende Gedanken#

Einführung#

Erzeuge eine Reihe von Karten#

Verdoppel die Karten#

Das Karussell animieren#

Abschließende Gedanken#

Einführung

Erzeuge eine Reihe von Karten

Verdoppel die Karten

Das Karussell animieren

Abschließende Gedanken

Einführung

Erzeuge eine Reihe von Karten

Verdoppel die Karten

Das Karussell animieren

Abschließende Gedanken