Share
Dank flexbox können wir heutzutage relativ einfach sehr attraktive und moderne Layouts erstellen. In diesem Lernprogramm werden wir eine Benutzeroberfläche betrachten, die kürzlich für Google National Parks verwendet wurde. Außerdem erfahren Sie, wie Flexbox uns dabei helfen kann, dies zu verbessern.
Bevor wir weiter fortfahren, schauen wir uns an, was wir bauen werden (möglicherweise müssen Sie die größere Version überprüfen, da der volle Effekt in Ansichtsfenstern mit mehr als 800 Pixeln auftritt):
Bewegen Sie den Mauszeiger über die Links, um die entsprechenden Effekte auszulösen.
Lassen Sie uns zunächst das Markup untersuchen, das wir zum Erstellen dieses Layouts verwenden werden. Wir definieren a div Element mit fünf Verknüpfungen (Sie können die Elemente verwenden, die Sie für geeignet halten). Jeder unserer Links enthält eine div mit der Klasse von Überlagerung. Unten sehen Sie das Grundgerüst unseres Codes:
Sobald das Markup fertig ist, definieren wir einige anfängliche CSS-Stile, insbesondere:
Accentsconagua
div als Flexcontainer und stellen Sie seine Höhe mit der Höhe des Viewports gleich Höhe: 100 Vh.flex: 1. Zusätzlich haben alle unsere Links ein Hintergrundbild (von unsplash.com bezogen), das die Höhe des Viewports abdeckt. Als Fallback (für den Fall, dass ein Bild nicht verfügbar ist) legen wir für jedes Bild eine eigene Hintergrundfarbe fest.Wenn Sie den Mauszeiger über einen Link bewegen, wird seine Größe im Vergleich zur Größe der anderen Links dreimal größer. Wir tun dies, indem wir den Wert von ändern biegen Eigenschaft des Ziellinks. Glücklicherweise gehört diese Eigenschaft zu den animierten CSS-Eigenschaften, sodass wir einen glatten Übergangseffekt generieren können (zumindest in den meisten aktuellen Browsern)..
Hier ist ein Teil des CSS-Codes, der zeigt, was wir oben beschrieben haben:
.Flex-Wrapper Anzeige: Flex; Höhe: 100 Vh; .flex-wrapper a position: relativ; flex: 1; Hintergrundgröße: Cover; Hintergrundposition: Mitte; Hintergrundwiederholung: keine Wiederholung; Übergang: Flex .4s; .flex-wrapper .one Hintergrundbild: URL (IMAGE_PATH); Hintergrundfarbe: rot; .flex-wrapper a: hover flex: 3;
Wenn wir uns die Demo in einem Browser anzeigen lassen, der Flexbox unterstützt, sehen wir dieses Ergebnis:
Der nächste Schritt besteht darin, der Überlagerung einige Stile zuzuweisen. Folgendes tun wir:
.Innenüberzug Element) vertikal und horizontal.Hier sind die zugehörigen CSS-Stile:
.Flex-Wrapper .overlay Anzeige: Flex; Ausrichten-Elemente: Mitte; Inhalt rechtfertigen: Mitte; Polsterung: 0 10px; Position: absolut; oben: 0; rechts: 0; unten: 0; links: 0; Übergang: Hintergrundfarbe .4s; .flex-wrapper a: hover .overlay Hintergrundfarbe: rgba (0, 0, 0, .5);
Nun ist es an der Zeit, die inneren Teile unserer Überlagerung zu gestalten. Diese sind standardmäßig ausgeblendet und sollten nur angezeigt werden, wenn wir über den entsprechenden übergeordneten Link zeigen. Aber nicht sofort, wir werden sie nach einer kurzen Verzögerung enthüllen. Diese Verzögerung ist wichtig. Wenn wir es nicht speziell definieren, wird der Übergangseffekt etwas hässlich aussehen. Entfernen Sie es und testen Sie die Demo, um zu verstehen, was ich meine.
Um es kurz zu rekapitulieren, wird zuerst der Link größer und dann werden die Overlay-Elemente sichtbar. Auch verwenden wir die translate3d () um einige Slide-In-Effekte zu erzeugen. Zu guter Letzt benutzen wir die transform-style: preserve-3d hacken (oder einen ähnlichen), um mögliche flackernde Effekte in verschiedenen Browsern zu verhindern.
Und hier sind die verwandten CSS-Stile:
.Flex-Wrapper .overlay-inner * Sichtbarkeit: verborgen; Deckkraft: 0; Verwandlungsstil: preserve-3d; .flex-wrapper .overlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: translate3d (0, 60px, 0); .flex-wrapper a: hover .overlay-inner * Deckkraft: 1; Sichtbarkeit: sichtbar; verwandeln: keine; Übergang: alle .3s .3s;
Mal sehen, was uns gegeben hat.
Die Seite sieht auf großen Bildschirmen gut aus, aber auf kleinen oder sogar mittleren Bildschirmen müssen wir einige Anpassungen vornehmen. Zum Beispiel können wir Folgendes tun:
Flex-Richtung: Spalte dazu Dabei fließen die Flex-Artikel von oben nach unten.Unsere Desktop-First-Medienabfrage sieht folgendermaßen aus (ich habe 800px nur verwendet, weil dies zu den eingebetteten Demos in diesem Beitrag passt - Sie können wählen, was Sie für am besten halten):
@media screen und (max-width: 800px) .flex-wrapper flex-direction: column; .flex-wrapper a: hover flex: 1; .flex-wrapper a: hover .overlay Hintergrundfarbe: transparent; .flex-wrapper .overlay h2, .flex-wrapper .overlay p Deckkraft: 1; Sichtbarkeit: sichtbar; verwandeln: keine;
Hier ist der endgültige Auftritt unserer Navigation:
Die Demo funktioniert in allen aktuellen Browsern, die Flexbox unterstützen.
In einigen Browsern stellen Sie möglicherweise fest, dass die Animation von biegen Eigentum ist nicht so glatt, wie es sein sollte, oder funktioniert überhaupt nicht. IE11 animiert diese Eigenschaft beispielsweise nicht, Edge dagegen. Dies ist vernünftig genug, wenn man bedenkt, dass es sich bei der Flexbox um einen neuen Layoutmodus handelt, der immer noch an Zugkraft gewinnt.
In diesem Lernprogramm haben wir unser Flexbox-Wissen verbessert, indem wir gelernt haben, wie man ein stilvolles Navigationslayout erstellt. Hoffentlich hat Ihnen gefallen, was wir hier aufgebaut haben, und Sie haben sich für Ihre nächsten Projekte inspirieren lassen!
Wenn Sie ein ähnliches Layout erstellen, vergessen Sie nicht, uns den Ansatz (reine CSS- oder JavaScript-basierte Lösung) zu zeigen.
Bevor ich schließen kann, möchte ich Ihnen einige Websites mitteilen, die ein ähnliches Layout wie das gerade erstellte verwenden:
