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.
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: https://css-tricks.com/examples/StarryNight
Beispiel 2: https://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: https://demo.marcofolio.net/a_parallax_illusion_with_css
Beispiel 2: https://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.
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“.
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
@ 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?