Webkrauts

Hinweis: Diese Website dient nur noch als Archiv. Viele Artikel erklären Grundlagen und Techniken, die immer noch relevant für Webworker sind. Einige Artikel sind mittlerweile aber überholt, weil es andere, modernere Techniken gibt. Wenn ihr aktuelle Artikel über Webentwicklung sucht, möchten wir euch das Smashing Magazine (englischsprachig) ans Herz legen.

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.

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.