Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Zoomscrolling

Sonnenseiten: Zoomscrolling

Gerade für One-Pager gibt es einige hübsche Scrolling-Lösungen, um die verschiedenen Inhalte der Webseite hin- und herzuschieben. Nicolai Schwarz zeigt heute eine Sonnenseite, die Scrolling experimentell mit der Typografie verknüpft und so eine einzigartige Spielerei hervorzaubert.

Scrolling ist ja eine schlichte Angelegenheit. Meist geht es von oben nach unten, manchmal auch von rechts nach links. In den letzten Monaten ist auch immer häufiger ein Parallax-Scrolling mit mehreren Ebenen zu sehen. Erstaunlich, wohltuend und überraschend kam im Frühjahr dann das Beercamp daher und zeigte, dass es auch anders geht – mit einem Zoomscrolling.

Screenshot: Beercamp

Per JavaScript wird hier der Scrollbalken gekapert und statt rauf und runter, geht es hier in die Seite hinein. Ebene für Ebene werden die verschiedenen Bereiche herangezoomt und enden mit einem kleinen Gimmick für Kino-Freunde. Möglich ist das vor allem durch @font-face, denn die hier verwendeten Schriften sind tatsächlich als Fonts eingebunden und skalieren deshalb ideal beim Zoomen.

Als Schriften kommen hier MOD und Hero zum Einsatz. Verwendung finden auch das HTML5 Boilerplate und Modernizr. Die Webseite ist in sieben Bereiche eingeteilt, und das JavaScript sorgt dafür, dass der Text des naheliegenden Bereiches sauber dargestellt wird. Ohne JavaScript werden alle Bereiche schlicht untereinander angezeigt. Und selbst der altertümliche IE6 zeigt zumindest die Informationen lesbar an.

Also: Eine ungewöhnliche Spielerei für moderne Browser plus die nötigen Informationen für alle anderen. So wie sich das gehört. Sicher nicht für jeden Kunden geeignet, aber eine sehr hübsche Idee für eine Mini-Site.

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

Tanja Handl
am 08.08.2011 - 10:34

Eine ziemlich geniale Seite, die auch typografisch sehr ansprechend gestaltet wurde. Danke für den guten Tipp!

Permanenter Link

SK
am 08.08.2011 - 12:03

Die Idee ist wirklich witzig und passt zu einer thematisch eher außergewöhnlichen Website. Allerdings hoffe ich, dass ich solche Spielereien nicht häufiger antreffe, denn es bricht mit bekanntem und akzeptiertem Nutzerverhalten.

Permanenter Link

Norman
am 08.08.2011 - 18:58

An sich ne nette Idee aber läuft praktisch nur in Chrome gut.. Firefox und IE gar nicht..

Permanenter Link

Tanja Handl
am 09.08.2011 - 12:16

@ Norman: Bei mir ist's mit Firefox 4.0 kein Problem - welche Version nutzt du?

@ SK: Gerade das ist ja das tolle daran. :)

Permanenter Link

lsyre
am 23.08.2011 - 14:07

Sehr schöne Seite!
@SK, @Tanja: ich finde grade der bewusste Bruch mit dem gelernten macht diese Seite so aussergewöhnlich.
Läuft hier übrigens auf FF nightly und Chrome 14 problemlos.

Permanenter Link

Die Kommentare sind geschlossen.