Meine Idee war es, das Verkleinern des Browserfensters mit dem physikalischen Prozess des Zerdrückens in Verbindung zu bringen. Ich habe dazu den Browser mit einer Müllpresse gleichgesetzt. Der Inhalt der Seite ist dementprechend der Inhalt eines Mülleimers.

Auf der Webseite stehen drei Objekte (Coladose, Teepackung und Milchpackung) zur Auswahl, welche jeweils einzeln durch Browsergrößenveränderung geschrottet werden können. Die drei Müllobjekte sind dabei alle im gleichen Größenverhältnis dargestellt.

Die Struktur des Codes ist recht simpel. Zum Einsatz kommen Media Queries, welche je nach Browserbreite ein bestimmtes Bild laden. Ein java-preloader soll dabei für eine ruckelfreie Interaktion sorgen.
Großen Zeitanspruch hat außerdem das Anfertigen und bearbeiten der Fotos genommen. Beim Fotografieren musste ich besonders darauf achten, dass sich die Objekte nicht zu sehr in die Höhe falten, da dieses dann in der Webseite ein Verschwinden hinter dem oberen Browserrand bedeuten würde. Problematisch wird es jedoch trotzdem bei kleineren Monitorauflösungen, da die Bilder für eine sehr hohe Auflösung angepasst wurden.

Durch das Anzeigen des Inhalts von Unknown akzeptieren Sie die Datenschutzbestimmungen des Anbieters.

Unknown vertrauen und Inhalt immer anzeigen

Anzeigen

©Martin von Lupin

Unknown

Sollte kein moderner Browser parat sein gibt es hier ein Video.

Das Zerdrücken der Objekte macht (mir) großen Spaß. Durch die recht großen und detaillierten Fotos und die Möglichkeit, die Geschwindigkeit des Stauchungsprozesses selber zu bestimmen wird der Vorgang beinahe real bzw. spürbar.

Außerdem ist es sehr spannend die stattfindenden Veränderungen der Objekte genau zu beobachten. Zum Beispiel ab wann sich Risse bilden Risse oder wann Material abplatzt.

Einen anderen interessanter Effekt bietet die Start- bzw. Auswahlseite. Wird die Maus über eines der drei Objekte bewegt, tritt dieses hervor. Dabei verändern sich auch Licht- und Farbschatten der anderen Objekte.

Der Kurs gab einen guten Einblick in die Syntax von html, css und javascript. Durch kleinere Zwischenaufgaben und schließlich dem Abschlussprojekt konnte ich meine bereits vorhandenen Kenntnisse ausbauen und somit sicherer im Umgang damit werden.

Die Arbeit am Projekt war sehr spaßig. Die Kombination von Fotografie und Code bzw. das Übertragen des Realen in eine Webseite war eine spannende Erfahrung.

Link zur Seite:

http://interface.fh-potsdam.de/Users/web_basics/Martin_von_Lupin/crashTheCan/index.html oder http://martinvonlupin.de/sub/crashmytrash/index.html