Hier möchte ich euch ein Beispiel für eine Webseite mit Parallax Scrolling Effekt zeigen.
Was ist Parallax oder Smooth Scrolling ?

Es wird bevorzugt bei One Pagern (Webseiten, welche nur aus einer einzelnen Seite bestehen ) verwendet. Die Navigation ist eine horizontale Liste. Es werden die einzelnen Abschnitte der Seite einfach angesprungen, in dem man einen Anker setzt.
Das geschieht über einen HTML Befehl.
Oft auch verwendet beim „Back to Top “ Button auf Webseiten.
Es kennt sicher jeder: Wenn man bei einem Back to Top Button sofort wieder am Start ist, ist es ein einfacher Anker.
Wenn man dabei das Zurück  Rollen der gesamten Seite mitbeobachten kann, ist es Smooth Scrolling.

Hierfür wird der Anker über ein jQuery oder Java Script angesprochen, damit das ganze dynamisch wird.

Unterschied zwischen Smooth und Prallax ?

Smooth Scrolling ist ein gleichmässiges bewegen
Beispiel: mediendesign-quer.com/parallax

Parallax Scrolling – hier sind die Pixel leicht versetzt sodass der Effekt entsteht, die einzelnen Teile verschieben sich zeitversetzt.
Beispiel: Tolles Beispiel incl. Tutorial und Files zum nachbauen von Ian Lunn

WAS BENÖTIGT MAN DAZU ?

• Eine horizontale Liste – als Navigation
• Ein paar Abschnitte für den Content
• Evt. ein GridSystem, falls das ganze responsive umgesetzt sein soll
• Schöne große Hintergrundbilder – ca 1900 mal 900 px oder größer
• smoothscroll.js – Plugin
• HTML – Anker

Wem das ganze zu aufwändig ist, es selbst zu programmieren, der kann sich hier bei startbootstrap.com schöne fertige Templates herunterladen, welche sowohl privat als auch kommerziell zu nutzen sind.
Ebenfalls bietet designmodo.com ähnliche fertige Templates an.

Vorteil der fertigen Templates:

• Sie sind perfekt programmiert
• einfach zu verwenden
• kostenlos
• Top modern und voll im Trend

Nachteile von fertigen Templates:

• Es wird oft verwendet, der individuelle Look fehlt
• Durch die hohe Professionnalität der Anbieter – wenig Freiraum für Änderungen
• Wer gröbere Änderungen vornehmen möchte, muss sehr gut programmieren können
• Der Aufwand für Änderungen ist hoch

FAZIT:

Parallax Scrolling ist nach wie vor sehr im Trend. Damit lassen sich tolle Effekte erzielen.
Es gibt sehr viele ganz schöne fertige und kostenlose Templates zum download.

WEITERFÜHRENDE LINKS:

• Webdesign – Ideengenerator von Designmodo