Webdesign Daily – kostenlose jQuery Infinite Scrolling Tutorials
Kommentare

Infinite Scrolling ist ein Design-Konzept, das im Netz bereits weit verbreitet ist und dank immer kleinerer Displays von mobilen Endgeräten in den vergangenen Monaten einen zweiten Frühling erlebt. Denn damit lassen sich Webseiten unendlich lang scrollen. Berühmte Beispiele für Infinite Scrolling sind etwa Facebook oder Pinterest. Kein Wunder, bieten diese Seiten enorm viele Bilder und Kommentare – auf eine Paginierung wird hier weitestgehend verzichtet und das kommt der User Expierence zugute, weil einfach alles auf einer unendlich langen Seite zu finden ist.

Ein weiteres Beispiel für ein gut umgesetztes Infinite Scrolling findet sich auf der Mikroblogging-Seite Tumblr. Hier können Fotos gebloggt oder re-bloggt werden, die anschließend im Dashboard erscheinen. Sobald sich ein User neu einloggt, erscheinen die neuesten Posts, indem sie automatisch im Infinity-Style heruntergescrollt werden.

Diese Technik eignet sich zwar nicht für jede Art von Website, denn wenn es nicht genug Content gibt, gibt es auch nichts zu Scrollen. Wir haben uns auf die Suche gemacht und drei sehr interessante jQuery-basierte Tutorials gefunden, mit denen Ihr Infinite Scrolling einmal selbst ausprobieren könnt:

Infinite Ajax Scroll, a jQuery plugin

Das erste Tutorial ist von fieg.nl zeigt Euch, wie Ihr mit dem vorgestellten Open Source jQuery Plugin endlos scrollbare Webseiten erstellen könnt:

jquery tutorial

Bildquelle Screenshot: fieg.nl

jQuery Quickie: Unlimited Scroll using the Twitter API

Nicht Klicken sondern Scrollen, lautet auch hier die Devise: Das Tutorial von marcofolio.net nutzt in seiner Anleitung das Twitter-API. Somit erfahrt Ihr ganz nebenbei auch etwas über JSON. Viel Spaß:

jquery tutorial

Bildquelle Screenshot:  

Load content while scrolling with jQuery

Folgendes Tutorial von webresourcesdepot.com präsentiert Euch ein jQuery Scrolling Feature, bei dem sich der Content lädt, während die Seite weitergescrollt wird:

jquery tutorial

Bildquelle Screenshot: webresourcesdepot.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -