4 Wege, um reichere Web-Erfahrungen zu erstellen
Das Web hat sich stark von einem einfachen Dokumenten-Repository entwickelt, und wir verfügen jetzt über Browser, die sowohl auf Desktop- als auch auf Mobilgeräten umfangreiche visuelle Interaktionen ermöglichen.
Da ich in diesem Artikel gerne darüber sprechen möchte, wohin das Web führt, werden viele der Features, die ich behandeln werde, möglicherweise nur eingeschränkte Unterstützung haben. Daher ist es wichtig, Ressourcen wie caniuse.com mit einer robusten Liste von Funktionen und Diagrammen, die angeben, wo sie unterstützt werden.
Lassen Sie uns einen Blick auf die vier Möglichkeiten werfen, wie Sie Ihre Site UX verbessern können:
1. CSS
CSS ist die Styling-Sprache für unsere Dokumente. Wir neigen dazu, dies in einfachen Worten wie der Änderung der Schriftgröße oder Farbe zu denken, aber es wird immer leistungsfähiger mit Funktionen wie Transformationen und Animationen. Wir bekommen auch neue Funktionen, um es noch leistungsfähiger zu machen.
Wenn Sie Vektormasken in Werkzeugen wie Photoshop verwendet haben, sollten Sie mit der dahinter stehenden Idee vertraut sein CSS-Clippfade Mit dieser Funktion können Sie eine Form in CSS definieren, die die transparenten und undurchsichtigen Teile Ihres HTML-Inhalts definiert. Diese funktionieren gut mit CSS-Übergänge zum Ausblenden und Aufdecken von UI-Elementen. Auf ähnliche Weise kommen CSS-Masken zum Web, mit denen Sie die transparenten Teile Ihres Inhalts mithilfe eines Bildes definieren können. Auf diese Weise können Sie die Transparenz in Ihren Entwürfen für visuelles Interesse oder Texturen effektiver nutzen.
2. SVG
Die meisten Bilder, die wir heute im Web finden, sind Rasterbilder, die aus Pixeln bestehen. Das bedeutet, dass sie beim Skalieren oder Anzeigen auf Geräten mit höherer Auflösung verpixelt werden.
Vektorgrafiken sind genial, weil sie aus geometrischen Primitiven bestehen, die ihre scharfen Kanten in jeder Größe behalten.
SVG ist das Vektorformat für das Web. Wir können damit Grafiken darstellen und sogar deren Eigenschaften mit CSS manipulieren und animieren. Wo SVG wirklich mächtig wird, wenn wir es mit Scripting kombinieren. Snap ist eine JavaScript-Bibliothek, die das Bearbeiten und Animieren von SVG-Inhalten erleichtert. Es konzentriert sich auf moderne Browser und unterstützt die neuesten SVG-Funktionen wie Gruppen und Clip-Pfade. Snap ist auf GitHub verfügbar und wir haben es sogar verwendet, um eine reich animierte Banner-Anzeige zu erstellen. Sie können mehr darüber lesen immein Blog.
Und hier ist eine Probe von einem Wir haben es getan mit SVG.
3. 2D-Leinwand
2D Canvas ist ein weiteres leistungsstarkes Feature des Webs, das zum Zeichnen von Formen und Bildern optimiert wurde. Es bietet eine JavaScript-API, mit der Sie Ihr Canvas-Element genau steuern können. Sie können damit auch andere Medien wie Videos integrieren und so interaktive Schaltflächen zum Abspielen, Pausieren oder Scrubben von Videomaterial erstellen. 2D Canvas unterstützt jetzt Mischmodi, mit denen Sie die Farben von Layern auf visuell interessante Weise mischen können, über die Sie mehr lesen können Hier.
Wir fangen auch an, Unterstützung für Alpha-Video zu erhalten, mit der wir Videos besser in unsere Inhalte integrieren können. Ein lustiges Beispiel für Alpha-Video ist in OK Go's Musikvideo 'WTF' .
OK Go ist bekannt für aufwändige Musikvideos, und in diesem speziellen Video sie Schuss Choreographie vor einem grünen Bildschirm. Dann machte die Nachbearbeitung das Filmmaterial weiter oben auf sich selbst und erzeugte einen kühlen Echoeffekt, wo die Transparenz war. Wir können diesen Effekt mit 2D-Canvas reproduzieren, aber wir können einen Schritt weiter gehen und ihn interaktiv machen, indem wir Features wie Canvas-Blend-Modi verwenden, um neue visuelle Effekte in Echtzeit zu erstellen.
4. WebGL
WebGL bietet eine Low-Level-API zum Zeichnen von hardwarebeschleunigten 2D- und 3D-Grafiken. Das Potenzial hier ist Konsolen-Stil Spiele, wie Grand Theft Auto 5 direkt in Ihrem Browser ausgeführt wird. Wie Sie sich vorstellen können, wird WebGL etwas komplizierter, glücklicherweise Open-Source-Bibliotheken wie Drei .js Stellen Sie einen großartigen Einstiegspunkt mit großartigen Beispielen zur Verfügung, damit Sie beginnen können.
GitHub ist eine großartige Ressource für die Open-Source-Community geworden. Sie können Three.js und Snap on GitHub sowie andere großartige Bibliotheken finden, die die Arbeit im Web erleichtern. Ich setze oft auch Experimente und Werkzeuge, die ich auf GitHub mache, wie z Kamera-Spline-Werkzeug Ich habe Kamerapfads für Three.js erstellt, um durch 3D-Welten zu fliegen.
Da das Web immer vielfältiger und leistungsfähiger wird, ist es eine aufregende Zeit, ein Webentwickler zu werden. Die Vielfalt der Technologien und Ressourcen, auf die wir Zugriff haben, wächst ständig und es macht Spaß, die reichen Erfahrungen zu sehen, die Menschen mit ihnen machen.