kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Räumlichkeit und Bewegung mittels CSS

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Jonas

    Verfasst am 22. Mai 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?

  2. Gatzman

    Verfasst am 23. Mai 2008 um 7: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

  3. Dr. Ingo

    Verfasst am 14. Januar 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“.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.