Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Positionierungseffekte

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: Positionierungseffekte

Oft sorgen Effekte, die erst während der Benutzung der Seite ins Auge springen, für Aha-Effekte. Gerade dann, wenn sie noch frisch und unverbraucht sind. Andreas Demmer zeigt am Beispiel von Silverbackapp einen solchen Effekt.

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.

Screenshot: silverbackapp.com

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.

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.

Kommentare

Gerrit van Aaken

Gerrit van Aaken (Webkraut)
am 17.07.2008 - 09:07

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!

Permanenter Link
David Maciejewski

David Maciejewski (Webkraut)
am 17.07.2008 - 09:14

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.

Permanenter Link

Eric Merten
am 17.07.2008 - 13:39

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.

Permanenter Link

Ingo
am 17.07.2008 - 14:29

Danke, wär mir sonst nicht aufgefallen!

Permanenter Link

Markus
am 17.07.2008 - 14:45

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?

Permanenter Link

Benni
am 17.07.2008 - 17:29

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.

Permanenter Link
Andreas Demmer

Andreas Demmer (Autor)
am 17.07.2008 - 17:38

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.

Permanenter Link

niiconn
am 17.07.2008 - 17:43

Wirklich sehr netter Effekt. Ich sehe zwar auch keinen praktikablen Sinn dahinter, aber trotzdem sehr nett.

Permanenter Link

alexander farkas
am 17.07.2008 - 20:40

Für die Ideen-Liste:
Das selbe nutzt Dromaeo auch.

Permanenter Link

Ansgar Hein
am 18.07.2008 - 10:41

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!

Permanenter Link

Christoph
am 20.07.2008 - 10:43

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.

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?

Permanenter Link

Die Kommentare sind geschlossen.