Tag: jquery

Scrollorama: jQuery-Plugin für animierte Scroll-Effekte

Wem die Idee hinter der Promo-Website für die iPhone-Anwendung "Ben the bodyguard" gefallen hat, dem wird wahrscheinlich auch das jQuery-Plugin Scrollorama zusagen. Mit dem Skript können DOM-Elemente anhand der aktuellen Scroll-Position des Webbrowsers animiert werden. Sobald also eine bestimmte Position erreicht wird, können beliebige Effekte in einem definierten Zeitraum ausgeführt werden. Dabei werden die Animationen jedoch erst durch das Bewegen der Scroll-Leiste abgespielt.

Das Plugin ist einfach in der Handhabung: Für jedes zu animierende Element muss ein CSS-Selektor (vorzugsweise eine Klasse) erstellt werden, der dann an das Plugin übergeben wird:

• $(document).ready(function() {
• var scrollorama = $.scrollorama({
• blocks: ".scrollblock"
• });
• });

Anschließend können die Blöcke mit gewünschten Effekten belegt werden:

• scrollorama.animate("#block-1", {
• duration: 400, property: "opacity"
• })

Da auch die Website des Plugins von den Scroll-Effekten Gebrauch macht, wird hier schon gut ersichtlich, was sich mit dem Skript anstellen lässt.

Spine Mobile: MVC-Framework für mobile Web-Apps

Mit Spine steht ein kompaktes JavaScript-MVC-Framework für Entwickler zur Verfügung, die nicht den vollen Umfang von Backbone.js benötigen. Wer sich mit MVC in JavaScript noch etwas schwer tut, sollte einen Blick auf Agility.js werfen, da hier das MVC-Entwurfsmuster sehr einfach angewendet und ausprobiert werden kann.
Die Entwickler von Spine.js haben ihr Framework nun auch auf mobile Webanwendungen optimiert und Spine Mobile vorgestellt.

Die Bibliothek setzt auf HTML5, CSS3, Node.js, jQuery, GFX und wahlweise auf CoffeeScript. Mit der "Spine.app" wird ein Grundgerüst erzeugt, auf dem eine Anwendung aufgesetzt werden kann. Die MVC-Architektur eignet sich natürlich nur für Anwendungen, die Benutzereingaben annehmen, verarbeiten und ausgeben. Für mobile WebApps, die auf Smartphones ausgelegt werden müssen, dürfte die mobile Version von Spine also ein interessante Wahl sein.
Auch eine Unterstützung für PhoneGap ist vorhanden, wobei sich dieses Feature noch in einer frühen Phase befindet. Das PhoneGap-Framework gehört inzwischen zu Adobe und hat sich als kostenloses Framework für native Smartphone-Anwendungen bewährt.

Orbit: Modernes Image Slider-Plugin von ZURB

Projekte wie der CSS Grid Builder oder Bounce zählen zu den gelungenen Kreationen der Agentur ZURB, die sich auf klassische und mobile Webanwendungen spezialisiert hat. Inzwischen gibt es einen ZURB Playground, auf dem etliche Anwendungen und Skripte der Entwickler veröffentlicht werden. Darunter findet sich beispielsweise auch das jQuery-Plugin Orbit, das einen modernen Image-Slider darstellt.

Orbit bietet eine Slideshow-Funktion und die Möglichkeit, Beschriftungen (Labels) für die Bilder hinzuzufügen. Alle Optionen auf einen Blick:

• $("#featured").orbit({
• animation: "fade",
• animationSpeed: 800,
• timer: true,
• advanceSpeed: 4000,
• pauseOnHover: false,
• startClockOnMouseOut: false,
• startClockOnMouseOutAfter: 1000,
• directionalNav: true,
• captions: true,
• captionAnimation: "fade",
• captionAnimationSpeed: 800,
• bullets: false,
• bulletThumbs: false,
• bulletThumbLocation: "",
• afterSlideChange: function(){}
  });

In komprimierter Form ist der Slider rund 4 KB groß und steht als "Kit" zum Download bereit. Das Kit enthält das Plugin, Grafiken und eine fertige Demo-Seite.

Kinetic: jQuery-Plugin für sanftes Bild-Dragging

Wenn auf einer Website eine vergrößerte Darstellung einer Grafik (etwa von einem Produkt oder einem detaillierten Photo) interaktiv eingebunden werden soll, eignet sich eine Drag 'n' Drop-Funktionalität sehr gut dafür. Ein Skript wie die SpryMap erfüllt diesen Zweck. Ähnlich arbeitet das jQuery-Plugin Kinetic, mit dem sich ebenfalls Bildausschnitte mit einer Drag-Funktionalität ausstatten lassen.

Das Skript bietet die Möglichkeit, die Bewegung des verschobenen Bildausschnitts zu beschleunigen und abzubremsen (Acceleration und Deceleration). So wirkt der Effekt etwas sanfter und dezenter. Das Plugin bietet etliche Optionen, die auf der Skript-Website eingesehen werden können. Neben der Möglichkeit, den Bildausschnitt über den Mauszeiger zu verschieben, gibt es auch die Option, den Ausschnitt per Schaltfläche gezielt in eine Richtung zu bewegen.

jQuip: jQuery-Framework in Modulen laden

Was bei MooTools den "Core Builder" und bei der YUI-Bibliothek den "Configurator" darstellt, ist bei jQuery in seiner offiziellen Version derzeit noch nicht möglich: Das Erstellen einer individuell angepassten Code-Basis, die nur ausgewählte Effekte und Klassen enthält. Dadurch verringert sich die Dateigröße der Bibiliothek und Performance-Optimierung von Websites wird zunehmend wichtiger, da die Ladezeiten einer Seite auch die Platzierung in den Suchergebnissen von Google beeinflussen.
Unabhängig vom jQuery-Entwicklerteam wurde inzwischen jedoch eine Möglichkeit geschaffen, mit der sich auch jQuery in Modulen laden lässt. Das jQuip-Projekt erzeugt eine Code-Basis von jQuery, die mit unterschiedlichen Funktionen ausgestattet ist.

Zur Auswahl stehen:

• jquip.js (6.6k)
• jquip.events.js (1k)
• jquip.docready.js (.5k)
• jquip.css.js (2.5k)
• jquip.ajax.js (1k)

Über den jQuip-Builder können die unterschiedlichen Module zusammengesetzt werden. Alternativ kann auch eine eigene Query-Engine verwendet werden, die allerdings nur in modernen Webbrowsern funktioniert.
Auf einer Demo-Seite kann jQuip getestet werden. Man darf gespannt sein, wie sich jQuery in dieser Richtung entwickeln wird, denn auch im offiziellen Entwicklerteam arbeitet man daran, jQuery etwas abzuspecken.

Loupe: Bildausschnitte vergrößern mit jQuery

Um Bilder mit einer virtuellen Lupe vergrößern zu können, bieten sich verschiedene Möglichkeiten an. Mit Wadda steht bereits eine Lösung bereit, die auf Canvas basiert und einen kreisförmigen Bildausschnitt einblendet, der den vergrößerten Bereich beinhaltet.
Das Ganze funktioniert auch ohne Canvas bzw. HTML5, wenn der vergrößerte Bereich rechteckig sein darf — hier könnte dann eine Lösung wie das jQuery-Plugin Loupe interessant sein, das mit rund 70 Zeilen eine ähnliche Funktionalität bietet.

Das Plugin lässt sich mit verschiedenen Optionen einbinden, die eingesetzt werden können wie folgt:

• $("#element").loupe({
• width: 200,
• height: 150,
• loupe: "loupe"
• });

So lässt sich etwa die Höhe und Breite sowie die CSS-Klasse des vergrößerten Bereich einfach durch die Optionen bestimmen. Das Plugin eignet sich also gut für Produktabbildungen oder Grafiken, auf denen Details vergrößerbar sein sollen.

jQuery 1.6: Neuerungen im Blick

Das JavaScript-Framework jQuery steht aktuell in Version 1.6.4 zur Verfügung. Mit dem letzten Major-Update, Version 1.6, wurden einige Neuerungen eingeführt, die interessante Funktionen beinhalten. Wer die Updates noch einmal auf einen Blick sehen möchte, kann sich dazu den entsprechenden Blog-Eintrag bei Developer Drive ansehen.

So gibt es nun beispielsweise die Funktion "holdReady()", mit der sich das "ready()"-Event verzögert ausführen lässt (etwa für Plugins). Zudem können Attribute mittels "prop()" manipuliert und endlich auch mit "removeProp()" komplett entfernt werden.
Weiterhin steht mit "promise()" eine Möglichkeit zur Verfügung, mit der sich eine Aktion ausführen lässt, sobald eine Kette von Animationen beendet wurde. Hier können die neu eingeführten Deferred-Methoden "done()" und "fail()" eingesetzt werden.
Schließlich gibt es noch den ":focus"-Pseudo-Selektor, mit dem sich jetzt auch Fokus-Elemente ansprechen lassen. Mehr Details über die Änderungen finden sich in bei Developer Drive.

jQuery Timelinr: Plugin für interaktive Zeitstrahlen

Um besondere Ereignisse oder den Verlauf eines Projekts visuell darzustellen, eignen sich Zeitstrahlen sehr gut. Besonders interaktive Timelines erfreuen sich immer größerer Beliebtheit. Mit jQuery lässt sich ein solches Widget gut umsetzen und genau darum handelt es sich bei jQuery Timelinr von CSSLab. Mit dem Plugin können sowohl vertikale als auch horizontale Zeitstrahlen erstellt und mit Interaktionen versehen werden.

Das Plugin bietet eine Autoplay-Funktion und blendet die verschiedenen Zeitabschnitte bzw. Ereignisse durch unterschiedliche Effekte ein. Innerhalb eines Zeitabschnitts kann über die Jahreszahlen oder alternative Schaltflächen navigiert werden. Die Effekte, die Dauer sowie Navigationsmöglichkeiten lassen sich über die Optionen des Skripts einstellen. Die horizontale Beispiel-Version eines Zeitstrahls findet sich auf dieser Seite.