Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 28. November 2013

Scrollen, sliden, biegen und mehr: 5 frische jQuery-Plugins aus dem November 2013

Das jQuery-Universum wächst beständig. Es ist schwierig, mit der Entwicklertätigkeit in Sachen Plugins informatorisch Schritt zu halten. Und, seien wir mal ehrlich, vielfach lohnt sich das auch gar nicht. Wir stellen Ihnen heute fünf frische jQuery-Plugins vor, die allesamt im November entstanden sind oder offiziell vorgestellt wurden. Diese zu kennen, lohnt sich auf jeden Fall. Versprochen…

onScreen bearbeitet Elemente beim Betreten oder Verlassen des Viewports

onScreen von Silvestre Herrera arbeitet mit Elementen, wenn sie den Viewport erreichen und/oder aus diesem Verschwinden. Die einfachste Anwendungsmöglichkeit für onScreen ist ein LazyLoad für Bilder. onScreen sorgt hierbei dafür, dass Bilder erst dann geladen werden, wenn sie für die Anzeige im Viewport auch tatsächlich benötigt werden.

onscreen

onScreen kann aber mehr. Herrera stellt verschiedene Demos bereit. So ist onScreen in der Lage, Streamposts erst dann nachzuladen, wenn das Seitenende erreicht wird. Das kann auch bei horizontalem Scrollen erfolgen. onScreen lässt sich zudem auf DOM-Elemente in Containern anwenden, dabei sogar auf mehrere Container einer Seite gleichzeitig.

onScreen steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Slippry: Flexibler Slider auf Basis von HTML5 und CSS3

Slippry von Booncon aus dem finnischen Helsinki ist ein weiterer Slider – allerdings einer, der sich vom Einheitsbrei deutlich absetzt. Denn die Jungs von Booncon hatten aus eben dem Grund, dass es derlei Software massenhaft gibt, grundsätzlich gar nicht vor, selbst einen Slider zu bauen. Auf der Suche nach einem responsiven, für ihre Zwecke tauglichen Exemplar stellten sie nach eigenen Angaben indes fest, dass die verfügbaren Lösungen entweder kaum Flexibilität zeigten oder auf Funktionen fußten, deren Tage gezählt sind.

slippry

Folgerichtig wurde ein nagelneuer Slider auf Basis des aktuellen jQuery und unter Verwendung von HTML5 und CSS3 geschaffen, der dennoch Fallbacks für ältere Browser gewährleistet. Im HTML-Markup werden keinerlei Funktionen versteckt. Das als Slider zu definierende Element erhält eine eindeutige ID, die dann wiederum dem Funktionsaufruf übergeben wird. Parameter zur Anpassung der Optik und weiterer Verhaltensweisen finden im Funktionsaufruf statt. Booncon hält vielfältige Demos bereit.

Slippry steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Bigfoot kümmert sich um die Darstellung von Fußnoten, nicht nur in responsiven Designs

Fußnoten sind grundsätzlich eine schöne Sache und in wissenschaftlichen Arbeiten in jedem Falle unabdingbar. Ich persönlich vermeide den Einsatz von Fußnoten wegen der unschönen optischen Effekte und der schlechten Usability des Hin- und Herspringens im Text. Das neue jQuery-Plugin bigfoot von Chris Sauve aus Kanada könnte mich allerdings überzeugen.

bigfoot

Denn bigfoot bearbeitet herkömmlich erstellte Fußnoten automatisch und macht daraus klickbare Targets, die besonders auf mobilen Geräten die Usability deutlich verbessern. Anstelle eines nummerierten Links zeigt bigfoot ein Touchtarget und – besonders gut – blendet den Text der eigentlichen Fußnote in einem Overlay direkt am Fußnotenlink ein. Chris Sauve hat entsprechende Demos vorbereitet.

bigfoot-2

Bigfoot steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

stickUp hält beliebige Elemente im Scrollbereich sichtbar

Das Plugin stickUp des New Yorkers Liran Cohen tut, was der Name verspricht. Es sorgt dafür, dass ein definiertes Element stets am oberen Rand des Browsers sichtbar bleibt. Die Idee ist der in Mode geratenen Technik des One-Page-Designs entlehnt. Hauptanwendungsfall dürfte demnach die Anwendung auf eine Navigationsleiste oder eine Navigationsbox sein. Grundsätzlich kann stickUp jedoch jedes Element im Scrollbereich sichtbar halten, da sich das Plugin auf die übergebene ID des gewünschten Elements auswirkt.

stickup

Cohen liefert ausführliche Informationen und Anleitungen zur Nutzung, selbst in WordPress, mit. Ein WP-Plugin ist angekündigt. Die Demo zu stickUp ist aussagekräftig.

stickUp steht unter GLGPL-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Circle Type biegt Texte entlang von Kreislinien

Circle Type von Peter Hrynkow aus dem kanadischen Vancouver ist ein schlankes, extrem leichtgewichtiges Plugin, dass sich damit beschäftigt, Texte entlang einer Kreislinie zu setzen. Ob ganz rund, halb rund oder lediglich leicht geschwungen, nach oben oder nach unten – Hrynkows Plugin erledigt den Job. Demos finden sich hier.

circletype

Im Zusammenspiel mit FitText.js kann Circle Type Texte in gegebene Container einbiegen. Circle Type eignet sich hervorragend für responsive Layouts. Mit der Option Fluid passen sich Textkrümmungen dynamisch dem Viewport an. Ebenso wie FitText setzt auch Circle Type das Plugin Lettering.js voraus.

Circle Type steht unter Doppel-Lizenz GPL und MIT zum kostenfreien Download und zur ebensolchen Verwendung auf Github zur Verfügung.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.