Artikel
Sonnenseiten: Positionierungseffekte
Ein sehr schönes Beispiel, wie CSS Positionierungsangaben für kreative Effekte genutzt werden können, bietet die an sich recht spartanische Seite Silverbackapp: Vom oberen Browserrand hängen Lianen herab, unter denen ein Gorilla steht. Der Aha-Effekt folgt, sobald man das Browserfenster in der Breite vergrößert oder verkleinert; die Bewegungen der Lianen suggerieren eine räumliche Tiefe.
Dieser Effekt wird mit einer in der Computerspiel-Welt als Parallax-Scrolling bekannten Technik erzeugt. Beim Parallax-Scrolling bewegen sich mehrere hintereinander liegende Ebenen unterschiedlich schnell, wodurch eine räumliche Tiefenillusion entsteht.
Dem Entwickler auf die Finger geschaut…
Im Beispiel silverbackapp.com wird der Effekt durch drei übereinander liegende Container erzeugt, die jeweils gekachelte Lianen als Hintergrundbild gesetzt haben. Jeder der Container zeigt dabei die Lianen in unterschiedlicher Größe und Schärfe an, wodurch der räumliche Eindruck entsteht. Die Lianen selbst sind dabei als PNG mit echter Alpha-Transparenz freigestellt, so dass durch die unscharfen Bereiche der vorderen Ebenen die dahinter liegenden Ebenen durchscheinen. Die unterschiedlichen Bildbreiten und Werte der Hintergrund-Positionierung in Bezug auf den X-Wert in Verbindung mit dem Scroll-Attribut erzeugt das Parallax-Scrolling.
Leider sorgt die Ausreizung der CSS-Attribute und die Nutzung von transparenten PNGs dafür, dass ältere und weniger standardkonforme Browser (wie etwa der Internet Explorer 6) den Effekt nicht oder nur teilweise darstellen können. Natürlich gehen jenen Browsern dadurch keine wertvollen Informationen verloren. Sie müssen lediglich auf eine Spielerei verzichten.
Meiner Meinung nach ein sehr interessanter und zumindest auf Websites noch absolut unverbrauchter Effekt, der – ein bisschen Kreativität und handwerkliches Können vorausgesetzt – für überraschende WOW-Effekte sorgen kann. Denkbar sind bspw. Hintergründe wie Wolken, Sterne, etc., welche beim Scrollen der Seite für ein räumliches Erlebnis sorgen können. Hierbei ist man natürlich nicht auf horizontales Scrolling beschränkt; Richtig umgesetzt kann der Effekt auf bei Hoch- und Runterscrollen verwendet werden.
Zum Autor:
Andreas Demmer ist Teamleiter der Online-Unit einer Werbeagentur. Er ist Linux-Evangelist, PHP- und Webstandards-Enthusiast und hat bereits zahlreiche Artikel in Fachmagazinen rund um das Thema Software-Entwicklung verfasst, u.a. im PHP Magazin. Seine Liebe zu den Webstandards spiegelt sich in seinen Moralpredigten über standardkonforme Websites mit unaufdringlichem Javascript wieder.
Zur Aktion
Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.
- Info:
- Sonnenseiten: Positionierungseffekte ist Beitrag Nr. 439
- Autor:
- Andreas Demmer am 17. Juli 2008 um 08:00
- Kategorie:
- Sonnenseiten
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.
Wow! Allerdings ist eine Mehrzahl der Benutzer wohl eher nicht ständig dabei, das Browerfenster zu verkleinern. Aber für Scrollingeffekte bei langen Websites klingt das sehr interessant!
Kommentar by Gerrit van Aaken - 17. Juli 2008 um 09:07
Der Effekt ist schön, zweifellslos. Allerdings sieht ihn niemand, denn ich kenne kaum jemanden, der ständig sein Fenster auf und zu zieht.
Man könnte das ein bisschen weiterspinnen und mit jQuery beispielsweise die Ebenen verschieben, sodass wirklich jeder den Effekt sieht. Die Seite thenextanimation.de/ hat dies so umgesetzt.
Kommentar by macx - 17. Juli 2008 um 09:14
ja auch wenn die masse der besucher das nie sehen wird, zeigt es doch "kollegen" und entscheidern mit fachwissen, was man so alles kann.
ich finds gut.
Kommentar by Eric Merten - 17. Juli 2008 um 13:39
Danke, wär mir sonst nicht aufgefallen!
Kommentar by Ingo - 17. Juli 2008 um 14:29
Hat jemand eine Seite, die das Prinzip vertikal nutzt? Ich kann mir da gerade irgendwie nichts vorstellen – zumindest nichts, das a) Sinn macht und b) gut aussieht
Ein Getränk, das sich beim Runterscrollen langsam leert wäre ja z.B. was, oder?
Kommentar by Markus - 17. Juli 2008 um 14:45
Irgendwo habe ich sowas schon mal gesehen, allerdings vertikal. Nur leider weiß ich nicht mehr wo…
Allgemein ein netter Effekt, auch wenn ich bezweifle, dass der ursprüngliche Grund für die Überlagerung der Container diese Spielerei ist.
Kommentar by Benni - 17. Juli 2008 um 17:29
Beim CSS-Zen-Garden gibts den Taucher, der das Prinzip beim Runterscrollen nutzt: Dabei verändert sich eine Taschenlampe, deren Strahl immer heller wird, je weiter man runterscrollt.
Kommentar by Andreas Demmer - 17. Juli 2008 um 17:38
Wirklich sehr netter Effekt. Ich sehe zwar auch keinen praktikablen Sinn dahinter, aber trotzdem sehr nett.
Kommentar by niiconn - 17. Juli 2008 um 17:43
Für die Ideen-Liste:
Das selbe nutzt Dromaeo auch.
Kommentar by alexander farkas - 17. Juli 2008 um 20:40
Ich find die Idee prima und wenn es nicht die Seitengröße von 288 kB wäre (davon immerhin 277 kB für Bilder), dann würde ich das selbst auch mal ausprobieren. Schön!
Kommentar by Ansgar Hein - 18. Juli 2008 um 10:41
Was heißt hier leider?
Man sollte doch mal langsam hingehen und endlich mehr Effekte nutzen, die jeder vernünftige Browser versteht. Wie lange wollen wir denn noch solche Krücken wie IE6 durchfüttern?
Kommentar by Christoph - 20. Juli 2008 um 10:43