Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Bewegung und Räumlichkeit in Internetseiten beschränken sich heutzutage keinesfalls mehr auf Flash oder Javascript.
Mittels unterschiedlich positionierter Grafiken kann während der Skalierung des Browserfensters ein räumlicher, dreidimensionaler oder gar bewegter Eindruck entstehen.

Hier findet Ihr einige beeindruckende Beispiele für Räumlichkeit und Bewegung mittels Parallax (Linienrasterbild) und Background-Ausrichtung in CSS.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Simulation von Räumlichkeit

Die hier gezeigten Beispiele erzeugen eine Art Räumlichkeit mittels unterschiedlicher Überlagerung von Hintergründen in CSS. Meist werden hier drei verschiedene Elemente und Grafiken verwendet:
Zum einen wird dem body ein statisches Hintergrundbild verpasst, davor werden zwei DIVs positioniert die sich unterschiedlich zur Größe des Browserfensters verhalten. Wenn nun diese beiden Container ein größtenteils tranparentes PNG als Hintergrund zugewiesen wird, erscheint die Seite bei Skalierung des Browserfensters räumlich.

Beispiel 1: http://css-tricks.com/examples/StarryNight

Beispiel 2: http://silverbackapp.com/

Dreidimensionalität & Bewegung

Die nun folgenden Beispiele sind in meinen Augen um einiges beeindruckender, auch wenn durch die verwendete Parallax (Linienrasterbild)-Technik keine hochwertige grafische Gestaltung ermöglicht wird.

Der Effekt wird (extrem vereinfachte Erklärung) dadurch erzeugt, dass alle unterschiedlichen Bewegungszustände der Grafik in einem Bild gespeichert werden. Dieses Bild wird in vertikale Linien unterteilt und mit einem ebenfalls vertikal gestreiften Bild überlagert. Verändert sich nun die Position der überlagernden Grafik, so wird immer ein bestimmter Teil des unteren Bildes verdeckt. Somit ist es möglich verschiedene Bewegungsstadien in nur einem Bild zu vereinen.

Beispiel 1: http://demo.marcofolio.net/a_parallax_illusion_with_css

Beispiel 2: http://demo.marcofolio.net/your_own_css_parallax_illusion

Praktische Anwendung?

Die Effekte sind wirklich beeindruckend. Ob diese jedoch in der Praxis Anwendung finden ist fraglich, da alle Techniken eins gemein haben: Ohne eine Skalierung des Browserfensters sieht der Betrachter keinen Unterschied.

Sofern jemand noch weitere Beispiele zu diesem Thema findet, wäre ich froh über einen Kommentar.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 3 Kommentare

  1. Dr. Ingo
    schrieb am 14.01.2009 um 16:10 Uhr:

    Hallo
    es sollte auch möglich sein, das dieser Effekt mit einer Mausbewegung zu steuern ist ich habe ihn auf http://www.rockettheme.com gesehen! Dadurch wurd ich auf diesen Effekt aufmerksam.
    Ich gehe mal davon aus das es durch Verschachtelung in einem Container möglich sein sollte, und durch hinzufügen von „mouseover“.

    Antworten
  2. Gatzman
    schrieb am 23.05.2008 um 07:15 Uhr:

    So soll es aussehen.
    jQuery mag ich nicht. Aber Prototype kann das gleiche in gut :D
    Ich freue mich echt ma richtig auf das Projekt.
    In diesem Sinne:
    SCROLL IT BABY

    Antworten
  3. Jonas
    schrieb am 22.05.2008 um 12:24 Uhr:

    @ Christian: Schau dir die ganze Sache beizeiten doch mal etwas genauer an. Das ist genau das was ich im Hinterkopf hatte. Mittels jQuery sollte der Effekt auch ohne Skalierung des Browsers sichtbar werden oder?

    Antworten

Schreibe einen Kommentar zu Jonas Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: