Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 28. November 2013

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

Das jQuery-Universum wächst bestän­dig. Es ist schwie­rig, mit der Entwicklertätigkeit in Sachen Plugins infor­ma­to­risch Schritt zu hal­ten. Und, sei­en wir mal ehr­lich, viel­fach lohnt sich das auch gar nicht. Wir stel­len Ihnen heu­te fünf fri­sche jQuery-Plugins vor, die alle­samt im November ent­stan­den sind oder offi­zi­ell vor­ge­stellt wur­den. Diese zu ken­nen, lohnt sich auf jeden Fall. Versprochen…

onScreen bearbeitet Elemente beim Betreten oder Verlassen des Viewports

onScreen von Silvestre Herrera arbei­tet mit Elementen, wenn sie den Viewport errei­chen und/oder aus die­sem Verschwinden. Die ein­fachs­te Anwendungsmöglichkeit für onScreen ist ein LazyLoad für Bilder. onScreen sorgt hier­bei dafür, dass Bilder erst dann gela­den wer­den, wenn sie für die Anzeige im Viewport auch tat­säch­lich benö­tigt wer­den.

onscreen

onScreen kann aber mehr. Herrera stellt ver­schie­de­ne Demos bereit. So ist onScreen in der Lage, Streamposts erst dann nach­zu­la­den, wenn das Seitenende erreicht wird. Das kann auch bei hori­zon­ta­lem Scrollen erfol­gen. onScreen lässt sich zudem auf DOM-Elemente in Containern anwen­den, dabei sogar auf meh­re­re Container einer Seite gleich­zei­tig.

onScreen steht unter MIT-Lizenz auf Github zum kos­ten­lo­sen Download und zur frei­en Verwendung bereit.

Slippry: Flexibler Slider auf Basis von HTML5 und CSS3

Slippry von Booncon aus dem fin­ni­schen Helsinki ist ein wei­te­rer Slider – aller­dings einer, der sich vom Einheitsbrei deut­lich absetzt. Denn die Jungs von Booncon hat­ten aus eben dem Grund, dass es der­lei Software mas­sen­haft gibt, grund­sätz­lich gar nicht vor, selbst einen Slider zu bau­en. Auf der Suche nach einem respon­si­ven, für ihre Zwecke taug­li­chen Exemplar stell­ten sie nach eige­nen Angaben indes fest, dass die ver­füg­ba­ren Lösungen ent­we­der kaum Flexibilität zeig­ten oder auf Funktionen fuß­ten, deren Tage gezählt sind.

slippry

Folgerichtig wur­de ein nagel­neu­er Slider auf Basis des aktu­el­len jQuery und unter Verwendung von HTML5 und CSS3 geschaf­fen, der den­noch Fallbacks für älte­re Browser gewähr­leis­tet. Im HTML-Markup wer­den kei­ner­lei Funktionen ver­steckt. Das als Slider zu defi­nie­ren­de Element erhält eine ein­deu­ti­ge ID, die dann wie­der­um dem Funktionsaufruf über­ge­ben wird. Parameter zur Anpassung der Optik und wei­te­rer Verhaltensweisen fin­den im Funktionsaufruf statt. Booncon hält viel­fäl­ti­ge Demos bereit.

Slippry steht unter MIT-Lizenz auf Github zum kos­ten­lo­sen Download und zur frei­en Verwendung bereit.

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

Fußnoten sind grund­sätz­lich eine schö­ne Sache und in wis­sen­schaft­li­chen Arbeiten in jedem Falle unab­ding­bar. Ich per­sön­lich ver­mei­de den Einsatz von Fußnoten wegen der unschö­nen opti­schen Effekte und der schlech­ten Usability des Hin- und Herspringens im Text. Das neue jQuery-Plugin big­foot von Chris Sauve aus Kanada könn­te mich aller­dings über­zeu­gen.

bigfoot

Denn big­foot bear­bei­tet her­kömm­lich erstell­te Fußnoten auto­ma­tisch und macht dar­aus klick­ba­re Targets, die beson­ders auf mobi­len Geräten die Usability deut­lich ver­bes­sern. Anstelle eines num­me­rier­ten Links zeigt big­foot ein Touchtarget und – beson­ders gut – blen­det den Text der eigent­li­chen Fußnote in einem Overlay direkt am Fußnotenlink ein. Chris Sauve hat ent­spre­chen­de Demos vor­be­rei­tet.

bigfoot-2

Bigfoot steht unter MIT-Lizenz auf Github zum kos­ten­lo­sen Download und zur frei­en Verwendung bereit.

stickUp hält beliebige Elemente im Scrollbereich sichtbar

Das Plugin stickUp des New Yorkers Liran Cohen tut, was der Name ver­spricht. Es sorgt dafür, dass ein defi­nier­tes Element stets am obe­ren Rand des Browsers sicht­bar bleibt. Die Idee ist der in Mode gera­te­nen Technik des One-Page-Designs ent­lehnt. Hauptanwendungsfall dürf­te dem­nach die Anwendung auf eine Navigationsleiste oder eine Navigationsbox sein. Grundsätzlich kann stickUp jedoch jedes Element im Scrollbereich sicht­bar hal­ten, da sich das Plugin auf die über­ge­be­ne ID des gewünsch­ten Elements aus­wirkt.

stickup

Cohen lie­fert aus­führ­li­che Informationen und Anleitungen zur Nutzung, selbst in WordPress, mit. Ein WP-Plugin ist ange­kün­digt. Die Demo zu stickUp ist aus­sa­ge­kräf­tig.

stickUp steht unter GLGPL-Lizenz auf Github zum kos­ten­lo­sen Download und zur frei­en Verwendung bereit.

Circle Type biegt Texte entlang von Kreislinien

Circle Type von Peter Hrynkow aus dem kana­di­schen Vancouver ist ein schlan­kes, extrem leicht­ge­wich­ti­ges Plugin, dass sich damit beschäf­tigt, Texte ent­lang einer Kreislinie zu set­zen. Ob ganz rund, halb rund oder ledig­lich leicht geschwun­gen, nach oben oder nach unten – Hrynkows Plugin erle­digt den Job. Demos fin­den sich hier.

circletype

Im Zusammenspiel mit FitText.js kann Circle Type Texte in gege­be­ne Container ein­bie­gen. Circle Type eig­net sich her­vor­ra­gend für respon­si­ve Layouts. Mit der Option Fluid pas­sen sich Textkrümmungen dyna­misch dem Viewport an. Ebenso wie FitText setzt auch Circle Type das Plugin Lettering.js vor­aus.

Circle Type steht unter Doppel-Lizenz GPL und MIT zum kos­ten­frei­en Download und zur eben­sol­chen 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.