HTML5 & CSS3
Übersicht über von mir erstellte Designelemente
Auf dieser Seite werde ich nach und nach diverse von mir erstellte mit CSS3 gestaltete HTML(5)-Komponenten hinzufügen, inklusive Beschreibung, Nutzungsanleitung und Download-Links.
Projektbeschreibung
Die Idee für dieses CSS-Experiment kam mir, als ich überlegte, wie ich das dynamische Nachladen von Bildern für das sich für den Portfolio-Bereich dieser Website in Entwicklung befindliche Galerie-Plugin am besten visuell aufbereiten könnte. Das Resultat ist dieses nette HTML-Konstrukt, welches mittels Transitionen und Transformationen einen Markup-Block als eine Sanduhr darstellt, solange dessen Inhalt noch lädt. Nach dem Entfernen einer CSS-Klasse via JavaScript verwandelt sich diese dann in einen Inhaltsblock (oder gibt im Overlay-Modus die Sicht auf den inhalt frei). Ich habe dieses Konstrukt direkt nach Fertigstellung auch auf den Coding-Seiten eingesetzt, es erscheint immer wenn ein Live-Demo-kasten geöffnet wird, wie Sie direkt unter diesem Text ausprobieren können. Der Demoblock öffnet sich mit der Overlay-Animation, die Demo darin demonstriert dagegen das Wrapper-Verhalten.
Informationen zu Implementierung und Nutzung (inklusive erklärender Code-Auszüge) zu diesem Projekt finden Sie auf dessen Detailseite
Projektbeschreibung
Der Zweck dieses animierten Overlays ist, wie bei so ziemlich allen anderen ähnlich gebauten Overlays, zu verhindern, dass Benutzer eine Interaktion, die das Nachladen von Seiteninhalten auslöst, versehentlich zweimal hintereinander ausführen. Dies wird durch zwei Dinge sichergestellt:
Erstens vermittelt die Animation dem Nutzer den Eindruck, dass seine Interaktion einen Effekt hatte und gerade etwas passiert. Ajax-Requests laufen immer im Hintergrund ab und ohne derartige visuelle Hinweise sind Benutzer geneigt zu glauben, dass ihre letzte Aktion keinen Effekt hatte, wenn die Server-Antwort aufgrund großer zu ladender Datenmengen und/oder zu geringer Bandbreite etwas länger dauert. Dann sind sie versucht die Aktion zu wiederholen, was zu unerwünschten Nebeneffekten führen kann.
Zweitens stellt die Tatsache, dass das Overlay vor allen anderen Komponenten der Seite sitzt und somit jegliche Interaktion mit der Seite blockiert bis die neuen Komponenten fertig geladen wurden, eine Art Sicherheitsnetz dar. Sollte ein Benutzer den visuellen Hinweis nicht korrekt deuten oder zu spät erkennen, wird eine direkt auf die ursprüngliche Interaktion folgende zweite Aktion bereits geblockt.
Die Version des Overlays, welche auf dieser Website zum Einsatz kommt, ist jedoch nur eine von mehreren möglichen Kombinationen, denn ich gestaltete das Overlay so, dass die Optik der einzelnen Komponenten modular ausgetauscht werden kann. Ich tat dies um durch das Ausprobieren verschiedener Kombinationen den Look zu finden, welcher am besten zum Stil dieser Website passt. Als ich diesen fand warf ich jedoch nicht den ganzen Rest über Bord, sondern behielt die Modularität bei, um später alle Varianten des Overlays der Öffentlichkeit zur Verfügung stellen zu können.
Erstens vermittelt die Animation dem Nutzer den Eindruck, dass seine Interaktion einen Effekt hatte und gerade etwas passiert. Ajax-Requests laufen immer im Hintergrund ab und ohne derartige visuelle Hinweise sind Benutzer geneigt zu glauben, dass ihre letzte Aktion keinen Effekt hatte, wenn die Server-Antwort aufgrund großer zu ladender Datenmengen und/oder zu geringer Bandbreite etwas länger dauert. Dann sind sie versucht die Aktion zu wiederholen, was zu unerwünschten Nebeneffekten führen kann.
Zweitens stellt die Tatsache, dass das Overlay vor allen anderen Komponenten der Seite sitzt und somit jegliche Interaktion mit der Seite blockiert bis die neuen Komponenten fertig geladen wurden, eine Art Sicherheitsnetz dar. Sollte ein Benutzer den visuellen Hinweis nicht korrekt deuten oder zu spät erkennen, wird eine direkt auf die ursprüngliche Interaktion folgende zweite Aktion bereits geblockt.
Die Version des Overlays, welche auf dieser Website zum Einsatz kommt, ist jedoch nur eine von mehreren möglichen Kombinationen, denn ich gestaltete das Overlay so, dass die Optik der einzelnen Komponenten modular ausgetauscht werden kann. Ich tat dies um durch das Ausprobieren verschiedener Kombinationen den Look zu finden, welcher am besten zum Stil dieser Website passt. Als ich diesen fand warf ich jedoch nicht den ganzen Rest über Bord, sondern behielt die Modularität bei, um später alle Varianten des Overlays der Öffentlichkeit zur Verfügung stellen zu können.