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.

