Parallax Scrolling mit Jarallax
Kommentare

Das erste, das einem beim Besuch einer Webseite ins Auge sticht, ist das Design und die Interaktivität. Sogenannte „Parallax Scrolling Websites“ können in diesem Punkt besonders viel Eindruck schinden.

Das erste, das einem beim Besuch einer Webseite ins Auge sticht, ist das Design und die Interaktivität. Sogenannte „Parallax Scrolling Websites“ können in diesem Punkt besonders viel Eindruck schinden. Was aber heißt Parallax Scrolling überhaupt?

Parallax Scrolling

Es ist eine Technik, bei der beim Scrollen das Hintergrundbild langsamer läuft als die Elemente oder Bilder darauf. Bekannt ist das Prinzip schon länger – zum Beispiel aus Videospielen – aber inzwischen kann es auch im großen Stil für Websites genutzt werden.

So geht’s

Blogger und Webdesigner Rahul Chowdhury hat ein Tutorial erstellt, in dem er zeigt, wie man mittels der JavaScript Library Jarallax eben solche Scrolling-Effekte erzielen kann. Gestartet wird mit einer Liste an Ressourcen, die man braucht: das Backround Image, die Szenen-Elemente und die Jarallax Library. Das ganze basiert auf jQuery. Mit CSS werden der Website Body, ein paar Paragraphen und die Floating Elements gestylt. JavaScript sorgt für die Animation, HTML führt alles zusammen.

Das Ergebnis ist eine einfache HTML-Page, die über responsives Parallax Scrolling verfügt. Die Demo kann man sich hier anschauen.

Übrigens beschäftigen wir uns auch auf der WebTech Conference 2013 mit dem Frontend und was man damit alles falsch machen kann. Heute gibt es dazu unter anderem die Session „Pixelschubsen oder Frontend-Framework“ von Simon Hohenadl und Mareike Graf.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -