Unsere Ideen für Ihr Projekt

Parallax scrolling - A kind of magic

Verschieben oder bewegen sich in einem Bild die verschiedenen Distanzebenen mit unterschiedlicher Geschwindigkeit, so entsteht beim Betrachter der Eindruck von räumlicher Tiefe. Diese Technik wird „Parallax Scrolling genannt und kommt seit einiger Zeit auch in der Webgestaltung zum Einsatz. Auf Webseiten wird dabei in der einfachsten Variante die Hintergrundgestaltung beim Scrollen langsamer bewegt als die im Vordergrund liegenden Inhalte. Der dadurch entstehende räumliche Effekt und das eher unerwartete Verhalten sorgen für ein hohes Wertigkeitsgefühl beim Betrachter und steigert die Wiederkehrrate.

Alles bewegt sich

Bei Webseiten ist die übliche Bewegungsrichtung in 99% der Fälle das vertikale Scrollen. Mittels Scrollen navigiert der Besucher durch die Inhalte. In sogenannten „One-Pagern“, die das Scrollen durch Inhalte in aller Konsequenz nutzen, befinden sich, aneinander gereiht und durch Sprungmarken direkt erreichbar gemacht, alle Inhalte, die sich sonst auf mehrere Seiten verteilen. „Parallax Scrolling“ bietet hier die Möglichkeit, einzelne Inhaltsbereiche optisch voneinander abzugrenzen, indem beispielsweise das Hintergrundbild beim Scrollen angepasst an den jeweiligen Inhalsbereich wechselt. Oder es werden Inhalte animiert eingeblendet, nur gesteuert durch das Mausrad des Betrachters, abhängig von der aktuellen Scrollposition.

Die möglichen Effekte sind hierbei nur begrenzt durch die Funktionen von CSS und JavaScript. Rotation, Fading, Verschiebung (auch in horizontaler Richung) einzelner oder auch aller Elemente - vieles ist möglich. Jedoch gebietet, wie bei allen gestalterischen Mitteln, auch hier der ästhetische Sinn des Entwicklers dem Übermaß Einhalt. So wirken dezent eingesetzte "Parallax Scrolling"-Effekte oft wertiger als die Verwendung aller Möglichkeiten.

Mit skrollr ans Ziel

Nun gibt es, wie bei vielen populären Techniken, die Möglichkeit, das Rad stets selbst zu erfinden, oder man bedient sich einer bewährten Bibliothek. Im Falle von „Parallax Scrolling“ heißt sie „skrollr.

skrollr zeichnet sich vor allem durch einfache Implementierung, gute Performance und ein umfangreiches Repertoire an Möglichkeiten aus. Die Beispielseite zeigt vielfältige Anwendungsmöglichkeiten von „Parallax Scrolling“-Effekten.

Die Technik im Detail

Die Idee hinter skrollr: Jedes zu animierende Element wird mit HTML-"data"-Attributen versehen, die definieren, was an welcher Position geschehen soll. Dabei müssen nur Start- und Endpunkt einer Animation angegeben werden, den Rest dazwischen übernimmt die Bibliothek. Ein bisschen erinnert das an Animationen in Adobe Flash™: an Punkt X sei die Transparenz eines Elements 100% und an Punkt Y sei die Transparenz 0%. So entsteht schnell ein Fade-In-Effekt z.B. bei einer Überschrift.

Technisch realisiert in skrollr sieht das so aus:

Zuerst die Überschrift ganz ohne skrollr-Anweisungen, danach mit gesetztem Startpunkt data-0:

<h2>Meine Überschrift</h2>
<h2 data-0="opacity: 0">
  Meine Überschrift
</h2>

Als nächstes kommt der Animations-Endpunkt data-500 dazu:

<h2
  data-0="opacity: 0"
  data-500="opacity: 1"
>
  Meine Überschrift
</h2>

Diese Sequenz blendet die Überschrift über eine Scrolldistanz von 500 Pixeln sanft ein. 

Es sind natürlich auch Kombinationen möglich, um die Überschrift nach dem Einblenden nach weiteren 500 Pixeln Scrolldistanz auch wieder auszublenden.

<h2
  data-0="opacity: 0"
  data-500="opacity: 1"
  data-1000="opacity: 1"
  data-1500="opacity: 0"
>
  Meine Überschrift
</h2>

Vom One-Pager zur Slideshow

Hat man nun alle Inhalte des geplanten One-Pagers untereinander angeordnet bietet es sich an, fließende Übergänge zwischen den einzelnen Bereichen zu schaffen. Da die „Navigation“ und damit die Animation mit dem Mausrad gesteuert wird ist es ratsam, die Gestaltung mittels "position: fixed;" im sichtbaren Bereich des Besuchers „einzufangen“ und die Ein- und Ausblend-Effekte (z.B. durch Verschieben nach oben oder zu den Seiten hin) skrollr zu überlassen. Dadurch entsteht schnell der Eindruck einer professionell gemachten Präsentation (im Stile von Powerpoint), durch welche der Besucher selbst gesteuert Inhalte angeboten bekommt.

Contao spielt mit

One-Pager lassen sich in Contao einfach durch mehrere Artikel innerhalb einer einzelnen Seite realisieren. Interessant wird es beim Festlegen der Animation, da dynamisch gepflegte Inhalte auch immer einen nicht festgelegten oder vorhersagbaren Umfang mit sich bringen. Hier gilt es also, einen konsistenten und damit berechenbaren Animationsablauf zu planen, am besten mit einem Mockup-HTML (um sicher zu gehen, dass die Animation auch gefällig ist).

Steht der Ablauf fest, kann man mittels JavaScript/jQuery die einzelnen Inhaltsbereiche, die animiert werden sollen, um die entsprechenden "data"-Attribute anreichern. Ein wenig Rechenarbeit ist schon nötig, um die korrekten Timings für die einzelnen Animationsschritte zu ermitteln, aber im Endeffekt bietet das richtige Script beliebig vielen Inhalten den richtigen Übergang.

„Bring mich an den Punkt meiner Wahl“

Die technische Navigation in One-Pagern findet üblicherweise über HTML-Anker statt. Auch hier bietet skrollr die richtige Ergänzung - mit „skrollr-menu“ lässt sich ein Navigationsmenü realisieren, das keinen Komfort missen lässt und keine Animation überspringt (sofern gewünscht). Bei Contao kann man hier allerdings nicht das Standard-Navigationsmodul nutzen, sondern muss sich mit einer angepassten Form der Artikelnavigation behelfen.

Fazit

Mit skrollr bietet sich experimentierfreudigen Entwicklern und Kunden ein einfacher und robuster Einstieg in die Welt des „Parallax Scrolling“. Es funktioniert auf touch-basierten Mobilgeräten, ist leichtgewichtig, und sollte mal in einem Besucher-Browser kein JavaScript zur Verfügung stehen steht die Seite trotz allem als One-Pager mit allen Inhalten dem Besucher zur Verfügung. Einzig die Konzeption des Animationsablaufes bedarf guter Planung und einer geduldigen Hand, dann ist alles möglich.

Autor: Alexander Rothe