Hintergrundbild-Formen

Der folgende Beitrag wurde von Joseph Markus verfasst. Joseph hatte ein bestimmtes Design, das er für die Website Britain on Film des BFI implementieren musste. Wie ein echter Front-End-Entwickler betrachtete Joseph die Anforderungen und durchlief viele verschiedene Optionen, um den besten Ansatz zu finden. Er wird uns hier durch diese Reise führen. Ich weiß nicht, wie es Ihnen geht, aber ich liebe diese Art von Dingen.

Im Juli dieses Jahres wurde Britain on Film des BFI mit großem Beifall gestartet. Britain on Film, ein Archiv historischer Aufnahmen wie kein anderes, lädt die Zuschauer ein, eine Reise durch die britische Geschichte zu unternehmen.

Eines der Hauptmerkmale, die das Team von Ostmodern für dieses Produkt entwerfen und entwickeln musste, war eine Landing Page, die die Nutzer einlud, das Archiv zu erkunden und Inhalte nach Zeit, Thema und Ort zu entdecken. Eine Kernkomponente dieser Landing Page ist ein animiertes Modul mit Inhaltsvorschlägen, die jeweils Standbilder von Filmen aus dem Archiv darstellen.

Hier ist ein Video, das das Endergebnis zeigt

Der Auftrag für das Projekt machte deutlich, dass diese Aufgabe in überschaubare Teile aufgeteilt werden musste und folgende Einschränkungen berücksichtigt werden mussten

• CMS-verwaltete Bilder – Die Personen, die Inhalte im BFI-Team verwalten, laden Bilder mit vordefinierten Abmessungen hoch. Dieses Bild wird dann einem der drei Container zugewiesen: links, oben oder rechts.
• Responsivität – Der Container muss nicht nur horizontal verkleinerbar sein, sondern auch an Höhe gewinnen, wenn er schmaler wird.
• Animationen – Die Bilder wechseln nicht sofort, sondern blenden ineinander über.
• Browser-Unterstützung – Es sollte so weit wie möglich zurück funktionieren und eine gute Fallback-Lösung bieten.
• Semantik – Verwenden Sie HTML und CSS, kein Flash oder etwas Verrücktes.

Wir werden uns mit Kombinationen der oben genannten Einschränkungen befassen. Da ich eine angemessene Zeit mit der Recherche des besten Ansatzes für diese Aufgabe verbracht habe, dachte ich, es wäre sehr nützlich, meine Ergebnisse, meinen Ansatz und offensichtlich das Endergebnis zu teilen.

Dies ist ein Sketch-Wireframe des benötigten Layouts

Wir werden eine Reihe von Techniken durchgehen. Die letzte ist die Version, die in die Produktion ging.

1. CSS transform auf divs
2. CSS clip-path
3. SVG <pattern><image>
4. SVG <clipPath><polygon> + <image>

Versuch #1: CSS-Transforms

Dies ist der erste Gedanke, der mir kam. Ein Bildcontainer mit fester Breite/Höhe, relativer Positionierung und verstecktem Überlauf. Zwei Rechtecke darin, absolut positioniert, transformiert und gedreht – alles mit magischen Zahlen. Sehen Sie mein schnelles Sketch-Mock-up

Das größte Problem hierbei ist, den richtigen Rotationsgrad zu ermitteln. Das Einstellen der korrekten überdimensionierten Breite und Höhe jeder der Formen, die Positionierung der Elemente außerhalb der Grenzen des Hauptcontainers. Alles machbar, aber sehr langweilig und *schmutzig*. Wenn Sie diesen Weg gehen würden, wäre es vielleicht eine gute Idee, das Mock-up, wie ich es oben getan habe, als flaches Bild zu exportieren und es als Hintergrundbild der Seite festzulegen, dann mit der Positionierung und Anpassung der Elemente in DevTools zu beginnen, bis Sie es richtig haben.

Es gibt jedoch ein großes Problem. Nehmen wir an, Sie fügen Bilder in diese Container ein (wie mit background-image). Diese Bilder werden *auch gedreht*, was nicht das ist, was wir wollen. Es ist nicht unmöglich zu beheben. Sie könnten Pseudoelemente dafür verwenden und sie in die entgegengesetzte Richtung drehen, aber glauben Sie mir, das wird sehr knifflig, besonders wenn Sie mit Media Queries arbeiten.

Vorteile

• Bequeme Technik: einige gedrehte und positionierte divs

Nachteile

• Viel Berechnung und Messung
• Responsive Breakpoints sind schwer umzusetzen

Diese Option ist eindeutig keine Option.

Versuch #2: CSS clip-path

CSS clip-path kam mir als eines dieser Dinge in den Sinn, von denen ich gehört, aber nie benutzt hatte. Clippy, das Tool von Bennett Feely, lässt es sehr einfach und geradlinig aussehen.

Dies ist wahrscheinlich die sauberste, geradlinigste und definitiv meine Lieblingsoption.

Vorteile

• Einfach zu erstellen und zu modifizieren
• Sauberer Code

Nachteile

• Keine IE-Unterstützung, was eine Anforderung für dieses Projekt ist

Leider fielen die Nachteile aus dem Spiel. Hier ist trotzdem eine Demo, wie es funktioniert

Siehe den Pen LpbzRa von Joe (@jmarkevicius) auf CodePen.

Versuch #3: SVG <pattern><image>

Ich musste einiges recherchieren, um herauszufinden, was ich hier tue und das gewünschte Ergebnis zu erzielen. Meine SVG-Exporte aus Sketch waren etwas verwirrend und schienen viel unnötigen Kram zu enthalten. Ich musste viel experimentieren und habe festgestellt, dass das Verständnis von viewBox und preserveAspectRatio ziemlich wichtig ist. Hier sind einige Ressourcen, die dieses Verständnis fördern

• Jakob Jenkov: SVG Viewport und View Box
• Sara Soueidan: SVG-Koordinatensysteme und Transformationen verstehen (Teil 1) — Der Viewport, viewBox und preserveAspectRatio
• Joni Trythall: Ein Blick auf preserveAspectRatio in SVG
• Giovanni DiFeterici: SVG und die preserveAspectRatio-Eigenschaft

Vorteile

• Breite Browserunterstützung (IE 9+, Firefox 41+)

Nachteile

• Eine kleine Enttäuschung nach CSS clip-path
• Firefox hat einen Bug in Versionen <40 (Bug sichtbar in der folgenden Demo oder hier)

Beispiel für ein zuschneidbares Bild als Hintergrund in verschiedenen SVG-Formen

Siehe den Pen SVG Pattern playground von Aleksey (@bonflash) auf CodePen.

Versuch #4: SVG <clipPath><polygon> + <image>

Diese Option entstand als Workaround für den Firefox-Bug, der im letzten Versuch beschrieben wurde. Sie wendet die Bilder über das normale SVG <image>-Tag an und wendet dann einen clip-path darauf an, der aus den notwendigen <polygon>s aufgebaut ist.

Siehe den Pen jPgmWG von Joe (@jmarkevicius) auf CodePen.

Dies ist das Beispiel, das in die Produktion ging, aufgrund seiner breiten Browserunterstützung.

Einige schicke Übergänge hinzufügen, weitere Elemente darüber legen und voilà – die Britain on Film Landing Page auf dem BFI Player ist bereit.

Lass mich deine Gedanken in den Kommentaren wissen!

Additional Resources

• MDN: viewBox
• Justin McCandless: Den Wahnsinn von SVG viewBox verstehen
• CSS-Tricks: Clipping und Masking in CSS
• Steven Bradley: SVG-Grafiken mit dem viewBox-Attribut verschieben und skalieren
• Tavmjong Bah: Test von SVG ViewPort und ViewBox in HTML