Der folgende Beitrag ist ein Gastbeitrag von Fabrice Weinberg. Fabrice ist ein regelmäßiger Mitarbeiter hier. Er ist immer auf der Suche nach den neuesten Technologien und Möglichkeiten. Hier, am Anfang von iOS7, schaut er sich an, wie man einen bestimmten Effekt nachbildet, von dem man vielleicht nicht ahnt, dass er im Web überhaupt möglich ist. Es ist knifflig, nutzt brandneue Features, aber machbar!
Beginnen wir mit dem Hintergrund. @simurai fragte vor einiger Zeit, ob es möglich sei, einen Blur-Effekt auf beliebige DOM-Knoten anzuwenden, um den Translucent-Effekt von iOS7 im Control Center zu simulieren (seinen Pen finden Sie hier).
Ich werde nicht genau erklären, wie man diesen Effekt für das Control Center erstellt, sondern mich darauf konzentrieren, wie man etwas Ähnliches wie den Blurred-Header-Effekt erstellt, den man in iMessage und vielen anderen Apps in iOS7 findet. Aber die Tricks, die Sie lernen werden, machen es auch möglich, den Effekt des Control Centers zu erstellen.
Verwendete Technologien
Diese Lösung nutzt intensiv CSS Regions, die noch ein Entwurf sind, aber dank Adobe heute in WebKit/Blink implementiert sind.
Mit der Veröffentlichung von iOS7 ist Mobile Safari der erste Browser, der dieses Feature standardmäßig aktiviert (immer noch mit dem Präfix -webkit-). In Google Chrome 29 müssen Sie nur experimental-webkit-features aktivieren. In Google Chrome 30+ ist es experimental-web-platform-features unter about:flags.
CSS-Regionen
Kurze Einführung in CSS Regions: Es geht darum, die Struktur der Seite vom Inhalt zu trennen. Es gibt zwei neue CSS-Eigenschaften flow-into: named-region; und flow-from: named-region;, die verwendet werden, um eine sogenannte named-region zu definieren. Sie können sich das wie eine Variable vorstellen, die beliebige Inhalte aufnehmen kann.
Das Element mit flow-into darauf ist wie ein Reservoir für Inhalte. Diese Inhalte "fließen" in andere Elemente mit flow-onto darauf.
Ein einfaches Beispiel
Siehe den Pen %= penName %> von Fabrice Weinberg (@FWeinb) auf CodePen
Wenn Ihr Browser Regions unterstützt, werden Sie sehen, dass die Struktur vom Inhalt getrennt ist. Mit flow-into: content wird der Inhalt aus dem Div mit der Klasse .main-content durch beide Divs mit der Klasse .region mithilfe von flow-from: content; geleitet.
Für einen tieferen Einblick in CSS Regions lesen Sie den großartigen Artikel von Arno Gourdol CSS3 regions: Rich page layout with HTML and CSS3
Erste Schritte
Beginnen wir mit der Definition der HTML-Struktur. Sie ist recht einfach. Wir brauchen eine Art Header und einen Container für die Nachrichten. Aufgrund der Verwendung von CSS Regions wird ein weiterer Container benötigt, um den Inhalt zu halten, der durch den Header und den Nachrichten-Container fließen wird.
Siehe den Pen # von Fabrice Weinberg (@FWeinb) auf CodePen
Hier gibt es CSS, um den .header zu verwischen.
Wie im ersten Beispiel fließt alles, was nicht in den .header passt, durch den .content-container.
Das ist nicht das Verhalten, das wir wollen. Wir wollen den gesamten Inhalt im .content-container haben und nur Inhalte verwischen, die vom .header "verdeckt" werden. Lassen Sie uns das beheben.
CSS Regions verwenden, um den DOM zu "beamen"
Dieser Teil ist etwas hacky, da das Verhalten, overflow-y: auto auf ein Element anzuwenden, das die CSS-Eigenschaft flow-into: named-region; erhält, nicht in der Spezifikation beschrieben ist und somit von der Implementierung abhängt.
CSS Regions ermöglichen es uns, den Fluss beliebiger DOM-Knoten zu definieren und sogar overflow-y: auto hinzuzufügen, um den Inhalt scrollbar zu machen. Zusätzlich ist eine definierte Höhe erforderlich.
Verwenden wir das obige Beispiel, indem wir .main-content eine feste Höhe und overflow-y: scroll hinzufügen
Siehe den Pen %= penName %> von Fabrice Weinberg (@FWeinb) auf CodePen
Das sieht noch nicht gut aus. Das Scrollen funktioniert, aber der .header bleibt leer.
Jetzt kommt der spaßige Teil: Wir werden den Inhalt von .main-content zum .header-Element "beamen". Dies kann mit CSS3 geschehen, indem die gesamte Inhaltsebene von .main-content mit transform: translateY() transformiert wird, um .main-content um die Höhe des .headers nach oben zu verschieben.
Siehe den Pen %= penName %> von Fabrice Weinberg (@FWeinb) auf CodePen
Das sieht besser aus! Aber immer noch stimmt etwas nicht. Es gibt immer Inhalt, der vom .header verdeckt wird. Um dies zu beheben, müssen wir einfach die Höhe des .header als padding-top zum .main-content hinzufügen, um den beanspruchten Platz auszugleichen.
Siehe den Pen b8cc5b9a310ff94de8c707c24a3c99d0 von Fabrice Weinberg (@FWeinb) auf CodePen
Das war's. Das ist die Kerntechnik, die verwendet wird, um den iOS7-Translucent/Blurry-Effekt zu erzielen. Basierend auf dieser Technik habe ich dieses kleine Spielplatz gebaut, auf dem Sie den Header anpassen und sogar eine Tintenfarbe hinzufügen können.
Siehe den Pen iOS7 Translucent CSS von Fabrice Weinberg (@FWeinb) auf CodePen
Performance zählt
Werfen wir einen Blick auf die Renderleistung dieses Effekts
Oben sehen Sie eine Timeline, die während des Scrollens nach oben und unten aufgenommen wurde. Sie sehen, dass fast die Hälfte der verfügbaren Zeit pro Frame (16,66 ms) für das Painting verwendet wird. Bevor wir uns damit befassen, möchte ich Ihnen von einer großartigen neuen Funktion in den Chrome DevTools erzählen: Layers. Dies ist ein neuer Tab in den DevTools, in dem Sie sehen können, welche Elemente Chrome auf seine eigene Ebene in einem Dokument befördert. Es ist noch experimentell, daher müssen Sie das devtools-experiments-Flag in about:flags aktivieren. Starten Sie Chrome danach neu. Um das Layers-Experiment zu aktivieren, öffnen Sie die DevTools, klicken Sie auf das Schraubenschlüssel-Symbol unten rechts (oder drücken Sie ?), um die Einstellungen zu öffnen.
Verwendung des Layers-Tabs
Oben sehen Sie den geöffneten Layers-Tab. Chrome hat nur eine Ebene für das gesamte Dokument erstellt, das bedeutet, dass jede Änderung auf der Seite ein Repainting des gesamten Dokuments auslöst. Das ist teuer! Möglicherweise haben Sie das Kontrollkästchen in der oberen linken Ecke bemerkt. Es wird verwendet, um transform: translateZ(0) auf das .header-Element anzuwenden. Sie finden den Pen hier. Der transform: translateZ(0)-Hack wird verwendet, um ein Element auf seine eigene Ebene auf der GPU zu befördern.
Wie Sie sehen, gibt es jetzt eine zusätzliche Ebene für das div.header. Machen wir eine weitere Timeline, jetzt mit dem transform: translateZ(0)-Hack
Das sieht schon viel besser aus. Die Paint-Kosten betragen jetzt nur noch etwa 1/10 der Gesamtzeit pro Frame. Mit dem neuen Layers-Tab ist es nun viel einfacher zu sehen, wo Chrome Ebenen erstellt hat und wo potenzielle Leistungsengpässe liegen.
Zusammenfassung
Es ist faszinierend zu sehen, dass dies heute in WebKit/Blink möglich ist. Aber (es gibt immer ein Aber) diese Technik ist noch nicht für die Produktion bereit. Obwohl sie auf dem Desktop recht gut funktioniert, funktioniert sie derzeit nicht unter iOS7, sie ist **langsam** und **Scrollen funktioniert überhaupt nicht**.
Ich habe ein GitHub-Repository erstellt, in dem Sie den Quellcode für den Spielplatz finden.
Wenn jemand eine Idee hat, wie man das Scrollen unter iOS7 realisieren kann (vorzugsweise ohne JavaScript), würde ich es gerne wissen! Ich hoffe, Sie haben ein oder zwei neue Tricks gelernt. Danke fürs Lesen!
Layers Tab? Wie kann ich das aktivieren? In meinem Chrome erscheint dieser Tab nicht.
Wie ich erklärt habe, benötigen Sie die neueste Version von Chrome Canary. Und aktivieren Sie es in about:flags.
Seit Version Chrome 30 habe ich es gefunden, unter Overrides
Ich will keine Kontroverse auslösen, aber seien wir ehrlich – dieser Blur-Effekt ist keineswegs eine Erfindung von iOS. Tatsächlich ist er eine reine Kopie von Windows Vista (2006), und diese Technologie hieß Windows Aero Glass (können Sie googeln). Dieser Beitrag sollte also betitelt sein: "Blurry Transparent Header Effect wie Windows Aero Glass in CSS"
Ja, okay, Microsoft hat das vor 6 Jahren gemacht, aber zu sagen "von iOS 7" kommt bei der heutigen Zielgruppe besser an, findest du nicht? ;)
Ja... weil Microsoft Transparenz erfunden hat...
Ich verstehe Ihren Punkt, aber er ist ein wenig sinnlos. Microsofts Aero Glass war kein Header mit darunter fließendem Inhalt. Wenn wir also versuchen, einen Header mit Transparenz zu erstellen, warum sollten wir uns dann nicht auf iOS7 beziehen?
SVG ist vollständig in der Lage, dies mit einem
feGaussianBlur-Filter unter Verwendung derBackgroundImage-Quelle darzustellen; Tools wie Inkscape unterstützen dies gut (könnte gut für Mockups sein), aber vor einigen Jahren, als ich damit experimentierte, unterstützten es keine Browser und ich bezweifle, dass sich das geändert hat.Ich arbeite an einer Lösung für das gleiche Problem, die in modernen Browsern funktioniert. Bisher habe ich es geschafft, einen Schnappschuss des DOM durch JavaScript mit html2canvas zu machen und ihn mit einem Gaußschen Algorithmus zu verwischen. Muss ihn nur richtig beschneiden und mit dem Scrollen mitlaufen lassen. Diese Lösung wird sehr JS-lastig sein, bietet aber eine ordentliche browserübergreifende Kompatibilität. Werde sie mit der CSS Tricks Community teilen, sobald sie produktionsreif ist.
Ich habe gerade diesen ganzen Beitrag auf meinem iPhone mit iOS 7 gelesen und es hat bei mir alles einwandfrei funktioniert. Blur-Effekt, Scrollen, alles. Gut gemacht!
Vor ein paar Wochen habe ich dasselbe für einen Prototypen versucht, aber die Leistung auf dem Telefon war sehr schlecht. Ich habe mir eine Variation mit Canvas ausgedacht. Hier ist eine Demo, die auf Handys gut funktioniert
http://fsasso.com/labs/blur/
IOS erfordert einige Anpassungen aufgrund des Fehlens von Scroll-Events. Aber es funktioniert
Ich muss sagen, Ihre Version des Blur-Effekts funktioniert viel besser als diese Beispiele. Ich mag es, wenn meine Sachen auf Anhieb funktionieren, und dieser Kram funktioniert nicht – kein Blur bei keinem der Beispiele. Ich denke, die Verwendung von Canvas ist angemessener.
Cooler Effekt! Funktionierte bei mir auf iOS 7 einwandfrei!
Was Apple macht, ist etwas mehr als nur Transparenz, also hört bitte auf mit diesem Vista-Mist.
Es ist eine Schnittstelle, die Chamäleon-artig ist, da sie die Farbe vom Hintergrund annimmt, was wiederum ein einzigartiges Design schafft. Schauen Sie sich iTunes auf dem Desktop an, die Benutzeroberfläche und die Links ändern sich basierend auf dem Albumcover, iOS 7 ist eine vollständige Erweiterung davon und wird die Art und Weise, wie wir designen, komplett verändern.
Ich versuche seit einiger Zeit, Designs zu erstellen, die diesen Ansatz nutzen, die grafischen Hintergrundelemente lassen die Ästhetik der Seite beeinflussen und eine UI haben, die transparent ist und die Farbe annimmt.
Ich kann es kaum erwarten, bis es In-Browser-Techniken gibt, bei denen dies möglich sein wird. color: duotone-background-inherit;
Ich weiß nicht, wie ich es nennen soll, aber es wird großartig sein.
Hm, wenn ich die Vollbild-Beispiel auf dem iPhone mit iOS7 öffne, ist das Scrollen der Seite seidenglattt.
Ich erwartete mindestens eine niedrige FPS-Rate, aber ich wurde (glücklicherweise) enttäuscht. Wo genau liegt also das Performance-Problem? Vielleicht auf niedrigeren Android-Geräten?
Welches iPhone benutzt du? Auf meinem alten 4S ist es etwas langsam. Ich habe das Scrollen in diesem Commit behoben.
Schön.
ThrillOn.com macht das auf seinen Menüs, aber sie verwenden Canvas und CSS-Filter.
Großartige Arbeit!
Es funktioniert bei mir nicht. Die Chat-Blasen werden unter dem Telefon angezeigt und nicht darin? Ich denke, mit der Demo/den Beispielen stimmt etwas nicht.
In Google Chrome 29 müssen Sie
experimental-webkit-featuresaktivieren, in Google Chrome 30+ ist esexperimental-web-platform-featuresunter about:flagsPersönlich weiß ich, dass sowohl ich als auch unzählige Kunden, mit denen ich arbeite, immer noch WordPress wählen (aus verschiedenen Gründen, viele davon werden von Chris in diesem Beitrag behandelt).
Es war schon immer robust, offen und aktualisiert.
Mehr WordPress, sage ich!
Du bist der Beste, Fabrice! Du beherrschst das Internet.
Ausgezeichnete Lösung.
Ich habe einen anderen Weg gefunden, dies zu tun (nur FX) unter Verwendung der -moz-element-Funktion, um den dahinter scrollenden Inhalt in einem neuen, verwischten Element zu duplizieren.
Fiddle hier: http://jsfiddle.net/RgBzH/
Leider ist das momentan nur für FX.
Du bist ein Genie. Ich fand es super!