Tag: werkzeuge

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.

KineticJS: HTML5/JS-Library für Canvas-Interaktivität

Spezielle Bibliotheken für HTML5-Canvas-Anwendungen gibt es mittlerweile in Mengen. Aktuelle Beispiele sind Paper.js oder RPG.js, die jeweils sehr unterschiedliche Ziele verfolgen. Auf die Erstellung von interaktiven Canvas-Anwendungen wurde hingegen das Framework KineticJS ausgelegt, das unter Anderem mit Event-Listenern für Canvas-Objekte aufwertet, die dadurch transformiert werden können. KineticJS kommt mit einem durchdachten Ebenen-System, das aus einer Buffer-, einer Hintergrund- und einer Benutzer-Ebene besteht und sich schließlich zum finalen Resultat zusammenfügt.

Die Bibliothek bietet etliche Funktionen, erfordert aber dennoch Kenntnisse über die Canvas-Technik, da durch die API lediglich Interaktionen vereinfacht werden. KineticJS enthält zudem auch Funktionen für mobile Geräte, so dass auch Touch-Ereignisse eingesetzt werden können.
Wer sich Beispiele des Frameworks ansehen möchte, erhält auf dieser Seite einen guten Eindruck. Übrigens lassen sich HTML5-Animationen inzwischen auch in der Cloud erstellen: Die Plattform Mugeda wäre ein solcher Dienst, der sich aktuell noch in einer Preview-Phase befindet.

Adobe Edge: Preview 4 mit Symbolen und Web-Fonts

Adobe arbeitet kräftig an seinem neuartigen Animationswerkzeug für HTML5- und CSS3-Animationen. Kurz vor Weihnachten wurde ein Trailer veröffentlicht, in dem die neuen Features der vierten Preview-Version gezeigt wurden. Nun wurde das Preview 4 von Edge veröffentlicht und steht zum Download bereit. Auf der Features-Seite können die Neuerungen eingesehen werden. Unter der Haube wurden etliche Verbesserungen hinsichtlich Performance und Stabilität eingearbeitet und auch im Interface gibt es interessante Erweiterungen.

So wurden "Symbole" eingeführt, wie man sie aus Flash Professional kennt: Objekte auf der Bühne können also in einem Container verpackt und ineinander verschachtelt werden. Dadurch wird das Erstellen von komplexeren Animationen wesentlich vereinfacht und die Übersicht auf der Bühne wird verbessert.
Weiterhin können nun Web-Fonts eingebettet werden — da Typekit inzwischen zu Adobe gehört, ist eine Einbindung von Typekit-Fonts entsprechend einfach. Unterstützt werden hier neben den bezahlten "Token"-Services auch Offline-Font-Packages (wie FontSquirrel) oder verlinkbare Font-Services wie Google Web Fonts.
Auch die restlichen Neuerungen können sich sehen lassen, so dass Edge immer mehr zu einem wichtigen Werkzeug für moderne HTML/CSS-Animationen wird.

jsMorph: Schnelles Micro-Framework für Animationen

In der Welt der JavaScript-Bibliotheken entstehen immer mehr Micro-Frameworks, die auf einen bestimmten Zweck optimiert wurden. Gerade im Bereich der Animationen blühen interessante Skripte wie jsAnim oder $fx auf. Derartige Bibliotheken bieten in der Regel keine eigene Selector-Engine oder ein Event-System. Doch darin kann der Vorteil liegen, wenn lediglich die Animationen benötigt werden und auf Geschwindigkeit sowie Dateigröße geachtet werden muss (besonders bei mobilen Webanwendungen).
Mit jsMorph gibt es eine weitere Bibliothek dieser Gattung und hier hat der Entwickler Wert darauf gelegt, eine möglichst gute Performance mit gleichbleibender Geschwindigkeit der Animationen zu gewährleisten.

Das jsMorph-Framework bietet verschiedene Features wie Chaining, ein Queueing-System, Zeitkorrektur und animierbare Eigenschaften wie Farbe oder Transparenz. Die Zeit sowie die Framerate (FPS) werden automatisch angepasst, so dass eine gleiche Darstellung auf untereschiedlichen Browsern und Geräten bestehen bleibt. Zudem bietet jsMorph eine automatische Konvertierung von Einheiten (Px, Em, %, etc.), wodurch eine hohe Flexibilität gegeben ist.
In den Tutorials finden sich etliche Anleitungen und die Demos sprechen für sich. Derzeit befindet sich die Bibliothek noch in einer Alpha-Version.

Impress.js: Effektvolle Zoom-Präsentationen mit CSS3

Das Flash-Präsentationstool Prezi erfreut sich schon einiger Zeit großer Beliebtheit, da sich relativ einfach räumliche Präsentationen erstellen lassen: Einzelne Slides werden in einem dreidimensionalen Raum platziert und durch Navigieren entsprechend vergrößert oder verkleinert. Diesem Vorbild folgt der Entwickler Bartek Szopka, der mit seinem JavaScript-Framework Impress.js ein ähnliches Werkzeug geschaffen hat. Der Unterschied liegt in der Technologie, da Impress-Präsentation mit JavaScript und CSS3 auskommen.

Ähnlich wie in Prezi-Präsentationen werden auch hier die Slides räumlich angeordnet und durch einen Zoom-Effekt animiert. Zum Einsatz kommen unter Anderem die CSS3-Attribute "rotate" und "perspective", die beispielsweise auf dieser WebKit-Seite gut demonstriert werden. Leider liegt auch hier noch das Problem: Durch die Verwendung von "perspective" funktionieren die Präsentationen derzeit nur in WebKit-Browsern wie Safari oder Chrome. In Firefox werden solche Transformationen erst ab Version 10 möglich sein.
Wer sich das Framework dennoch ansehen und damit experimentieren möchte, kann den Quelltext bei GitHub herunterladen.

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.

Three.js: Beispiel für einfache Partikel-Simulation

Da WebGL immer stärker im Kommen ist, werden Frameworks wie PhiloGL oder Three.js ebenfalls wichtiger. Wer nach interessanten WebGL-Projekten sucht, wird an Evan Wallace nicht vorbeikommen.
Weitere Projekte und Tutorials zu dieser Thematik findet sich auch im Lab von Aerotwist. Paul Lewis präsentiert hier verschiedene Effekte und Anleitungen, die auf WebGL oder Three.js aufbauen.

Ein aktuelles Tutorial beschreibt die Erstellung von Partikeln mit der Three.js-Engine. Der Entwickler zeigt in diesem Beispiel, wie einfach sich eine simple Partikel-Simulation umsetzen lässt. Einsteigern, die noch etwas weiter vorne anfangen wollen, sei dieses Tutorial empfohlen, in dem die Grundlagen erklärt werden.
Sehenswert sind auch diese beiden Projekte, in denen Paul Lewis mit verschiedenen Effekten experimentiert.