Tritium-Design

Es war mal wieder Zeit für ein kleines Javascript-Experiment. In Anlehnung an die 3D-Coke von Roman Cortes, wollte ich einmal versuchen, mehrere Hintergrundbilder übereinander zu legen und durch Verschiebung eine gewisse Räumlichkeit zu erzeugen, wie man es früher gerne in Pseudo-3D-Spielen getan hat oder es auch heute noch beim Bühnenbau am Theater durchaus gebräuchlich ist.

Das Ganze ist zwar völlig nutzlos, sieht aber nett aus.
Gesteuert wird der Viewpoint über das graue Quadrat, welches sich in der linken oberen Ecke der Szenerie befindet.
Wer sich für den Code interessiert, kann sich das zip hier herunterladen: depthLayer.zip

        

Super Effekt und dazu noch genial einfach: http://www.romancortes.com/blog/pure-css-coke-can/
Roman Cortes schafft den Eindruck einer sich beim Scrollen drehenden Cola Dose – ohne zusätzliche Skripte nur mit reinem CSS!
Die Technik dahinter ist eigentlich so alt, wie die Filmtechnik: Der Betrachter schaut durch einen Sehschlitz hinter dem sich Momentaufnahmen einer Bewegung befinden. Wird der Suchschlitz nun in schneller Folge über diese Aufnahmen bewegt, entsteht der Eindruck einer Bewegung.
Bei der Lösung von Cortes, setzt sich das Bild aus mehreren eben solcher “Sehschlitze” zusammen, die als Background-Image die Oberflächentextur der Dose erhalten – zusätzlich ist das Attribut Background-Attachment: fixed gesetzt. Scrollt der Nutzer nun den umgebenden DIV-Container, so bewegen sich diese Sehschlitze über die fest verankerte Textur und der Eindruck einer Bewegung entsteht. Die Dreidimensionalität entsteht dabei durch die verwendete Textur (einer auf 2D gestreckten/aufgeschnittenen Cola Dose ) im Zusammenspiel mit den nebeneinander liegenden Sehschlitzen, welche immer den für die aktuelle Scrollposition entsprechenden sichtbaren Ausschnitt der Projektion darstellen. Dabei sind die Sehschlitze zu den Rändern hin schmaler als in der Mitte (1-2px am Rand, 55px in der Mitte – siehe Abbildung).
Um dem Ganzen noch den letzten Schliff zu geben, hat Cortes ein png über de Sehschlitze gelegt, welches nicht nur für die Lichtreflexion sondern auch für die Rundung der Dose sorgt – dadurch ist die Illusion nahezu perfekt.

Wenn man vom IE6 absieht (der das Attribut Background-attachment: fixed nicht auswertet), funktioniert das in allen gängigen Browsern.
Ich bin gespannt, wann wir Nachahmer davon finden und welche neuen Ideen sich daraus ergeben.

        

Um zu zeigen, dass sich die Fenster beliebig stylen lassen, habe ich mal zwei zusätzliche Designs zu der Apple-Variante hinzugefügt.

Wenn etwas Zeit da ist, werde ich vielleicht weitere Designs sowie ein kleines Tutorial hinzufügen.

        

Was macht man nicht alles bei diesem unbeständigen Sommerwetter – man setzt sich zum Beispiel hin und baut das Fensterkonzept in Javascript, CSS und HTML nach.
Wofür, möchte man fragen.
Naja, zum einen weil es geht – und zum anderen, weil es Spass macht seine eigenen Fensterdesigns umzusetzen.

“Seine eigenen Fensterdesigns” stimmt hier natürlich nicht ganz – ich habe das Design von Apple aufgegriffen, aber als Proof of Concept taugt es allemal.
Es gibt einen rudimentären Windowcontroller, Fenster lassen sich skalieren, minimieren, schließen und natürlich mit Inhalt füllen. Getestet erstmal nur in Firefox 3.5, Opera 9 und Safari 4

        

Weil das vergangene Beispiel für die Passwortmaskierung so kurz und simpel war, zeige ich hier ein weiteres einfaches Beispiel für eine Mehrfachauswahl mittels drag’n'drop bzw. Doppelklick. Auch dieses Skript besteht gerade mal aus knapp 60 Zeilen Quellcode und baut auf der Prototype- sowie Scriptaculousbibliothek auf.