So erstellen Sie eine schicke Netflix-Animation in CSS

Das Design der Netflix-Browsing-Seite ist seit einigen Jahren ziemlich ähnlich geblieben. Eine Hauptkomponente ist der Vorschau-Slider, mit dem Benutzer durch Inhalte blättern und mit der Maus über Elemente fahren können, um eine Vorschau anzuzeigen.

Ein einzigartiges Merkmal der Benutzeroberfläche ist das Hover-Verhalten. Wenn sich eine Vorschau einer Show beim Hover erweitert, werden die Karten daneben nach außen geschoben, damit sie sich nicht überschneiden. 

So wie das

Das können wir in CSS machen! Kein JavaScript. Keine Abhängigkeiten. Reines CSS. Aber bevor wir uns mit dem Code befassen, hier ist genau das, was wir tun wollen

1. Die Karte, über die gehovert wird, sollte sich unter Beibehaltung ihres Seitenverhältnisses erweitern.
2. Wenn eine Karte gehovert wird, sollten sich die anderen Karten nicht in der Größe ändern und nach außen bewegen, damit sie sich nicht überschneiden.
3. Alle Karten sollten vertikal zentriert zueinander bleiben.

Klingt gut? Dann lassen Sie uns zum Code kommen.

HTML und flexible Elemente

Lassen Sie uns eine Reihe von Bildern einrichten, die die Videovorschauen von Netflix darstellen. Dazu gehören

• Ein übergeordnetes Elternelement mit dem Namen  .container mit mehreren untergeordneten Elementen mit dem Namen .item
• Jedes .item-Element, das aus einem Bild besteht, das in ein Anker-Tag eingeschlossen ist
• Das .container in einen Flex-Container verwandeln, der die Elemente in einer Reihe ausrichtet
• Das Flex-Verhalten für die .item-Klasse festlegen, damit sie den gleichen Platz in der Reihe einnehmen

Erweiterung eines Elements beim Hover

Unser nächster Schritt ist es, ein Element beim Hover zu erweitern. Wir könnten dies tun, indem wir die width des Elements animieren, aber das würde den Fluss des Dokuments beeinträchtigen und dazu führen, dass die Geschwister des gehovertem Elements schrumpfen – außerdem ist das Animieren der width-Eigenschaft in manchen Fällen bekanntermaßen schlecht für die Leistung.

Um das Quetschen des Geschwisters des gehovertem Elements zu vermeiden, animieren wir stattdessen die transform-Eigenschaft – insbesondere ihre scale()-Funktion. Dies beeinträchtigt den Dokumentenfluss nicht auf die gleiche Weise wie width.

Geschwister nach außen bewegen

Die Geschwister eines gehovertem Elements vom gehovertem Element wegzubewegen ist der knifflige Teil des Ganzen. Eine CSS-Funktion, die uns zur Verfügung steht, ist der allgemeine Geschwister-Selektor. Dieser erlaubt uns, alle Geschwisterelemente auszuwählen, die sich *nach* dem gehovertem Element befinden.

Wir werden uns der translateX()-Funktion der transform-Eigenschaft bedienen, um die Dinge zu verschieben. Auch hier ist das Animieren von transform viel angenehmer als bei anderen Eigenschaften, die den Dokumentenfluss beeinflussen, wie z. B. Ränder und Abstände.

Da wir ein Element beim Hover auf 150 % skalieren, sollte die Translation auf 25 % gesetzt werden. Das ist die Hälfte des zusätzlichen Platzes, der vom gehovertem Element eingenommen wird.

.item:hover ~ .item {
  transform: translateX(25%);
}

Das erledigt das Verschieben nach rechts, aber wie können wir die Elemente auf der *linken* Seite verschieben? Da der allgemeine Geschwister-Selektor nur für Geschwister gilt, die sich *nach* einem bestimmten Selektor befinden (kein Zurückgehen), benötigen wir einen anderen Ansatz.

Eine Möglichkeit besteht darin, eine zusätzliche Hover-Regel für den übergeordneten Container selbst hinzuzufügen. Hier ist der Plan

• Beim Hover über den übergeordneten Container alle darin enthaltenen Elemente nach links verschieben.
• Den allgemeinen Geschwister-Selektor verwenden, um die Elemente, die sich nach dem gehovertem Element befinden, nach rechts zu verschieben.
• Sehr spezifisch werden, damit ein gehovertes Element nicht wie die anderen Elemente verschoben wird.

Wir gehen davon aus, dass Ihr Dokument einen Linkslauf-Schreibmodus verwendet. Wenn Sie diesen Effekt in einem Rechtslauf-Kontext verwenden möchten, müssen Sie alle Elemente innerhalb des gehovertem äußeren Containers nach *rechts* verschieben und den allgemeinen Geschwister-Selektor verwenden, um alle ausgewählten Elemente nach *links* zu verschieben.

Demo!

Eine kleine Anmerkung: Diese endgültige Version verwendet die Pseudo-Klassen :focus und :focus-within zur Unterstützung der Tastaturnavigation. Das Netflix-Beispiel verwendet sie nicht, aber ich denke, das ist ein schöner Touch für die Zugänglichkeit.

---

Da haben wir es! Ja, wir hätten stattdessen JavaScript-Event-Listener anstelle von CSS-Hover-Regeln verwenden können, und das könnte möglicherweise besser für Wartbarkeit und Lesbarkeit sein. Aber es macht manchmal Spaß zu sehen, wie weit CSS uns bringen kann!