Tag: webdesign

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.

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.

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.

FoneFrame: HTML5/CSS3-Kickstarter für mobile Seiten

Das Erstellen einer mobilen Seite von Grund auf bedarf diversen Einstellungen und Anpassungen: HTML- und CSS-Bereiche müssen für die Darstellung auf mobilen Geräten optimiert sein und auch andere Aspekte beeinträchtigen den Zeitaufwand, der für die Erstellung einer mobilen Website anfällt. Damit das Rad nicht immer neu erfunden werden muss, eignen sich kleine Frameworks wie Skeleton, die auf die Optimierung von mobilen Seiten ausgelegt sind.
Ein weiterer Vertreter dieser Art stellt das Projekt FoneFrame dar, das sich als HTML5/CSS3-Template versteht und als Kickstart-Paket für mobile Projekte eingesetzt werden kann.

Das Template setzt HTML5-Elemente wie article, section, nav oder header ein und kommt mit einem neutralen Erscheinungsbild. Eine Vorschau des Templates gibt es auf dieser Seite. Im Download sind verschiedene HTML-Dateien enthalten, die unterschiedliche Bereiche abdecken. Im Basis-Template finden sich zudem sämtliche Meta-Tags, die für eine mobile Website interessant oder wichtig sein können. Die Tags sind mit Kommentaren versehen, so dass sich das Template auch durchaus zum Stöbern eignet.

Adobe Edge: Preview 3 mit Actions und Labels

Vor einigen Monaten hatte Adobe mit einem neuartigen HTML/CSS-Animationswerkzeug namens Edge Aufmerksamkeit erregt: Die Anwendung bietet die Möglichkeit, HTML- oder CSS-Animationen durch eine intuitive Oberfläche zu erstellen. Edge ist After Effects in seinem Aufbau ähnlich und macht das manuelle Animieren von Elementen mittels Code überflüssig. Objekte können also einfach per Timeline und Keyframes transformiert werden.

Kürzlich erschient die dritte Preview-Version des Tools, das inzwischen durch etliche Features aufgewertet wurde. In der aktuellen Version wurden Actions integriert, die auch das Einbinden von Interaktionen ermöglichen. Actions sind also gleichzusetzen mit Events und können durch die Adobe Edge Runtime API angesprochen werden.
Adobe ist also bemüht, die neuartige Anwendung mit modernen Features auszustatten, so dass es durchaus als interessante Möglichkeit anzusehen ist, mit der sich HTML/CSS-Animationen in einer grafischen Benutzeroberfläche erstellen lassen. Fertige Beispiele und Demos stellt Adobe übrigens auch bereit.

ColorJack: Viele bunte Tools für Farbpaletten

Für die Erstellung von Farbpaletten eignet sich nicht nur Photoshop, sondern auch diverse Online-Tools wie ColorRotate oder der Color Scheme Designer. Nicht fehlen in dieser Sammlung darf die ColorJack Sphere, die erstklassige Werkzeuge zum Mischen und Erstellen von Farbpaletten bietet. Über einen Farbkreis können verschiedene Farbschemata zusammengestellt und angepasst werden.

Auf der Website von ColorJack finden sich weitere interessante Tools, die schon seit geraumer Zeit zur Verfügung stehen. Damals berichtete ich über SketchPad, einem interaktiven Zeichen-Werkzeug mit vielen Möglichkeiten. Auf der Seite ColRD.com finden sich neben Farben, Paletten oder Mustern ebenfalls ausgereifte Tools und Regler, mit denen sich Farbtöne sehr genau mischen lassen. Die neueste Kreation von ColorJack ist der CSS Background Generator, mit dem sich in Echtzeit Website-Hintergründe farblich anpassen lassen.

Mockup Builder: Modernes Online-Wireframing-Tool

Werkzeuge, mit denen sich schnell und einfach Mock-Ups (also grobe Entwürfe) erstellen lassen, gibt es mittlerweile mehr als genug. Viele solcher Online-Dienste wurden inzwischen monetarisiert und bieten in kostenfreien Versionen nur noch eingeschränkte Funktionalitäten. Auch das bekannte Pencil-Projekt ist in seiner ursprünglichen Form, also als Firefox-Erweiterung, nicht mehr zu haben. Dafür kann es aber als Offline-Version heruntergeladen werden.
Ein weiteres Wireframing-Tool, das sich derzeit noch in einer Beta-Phase befindet, stellt der Mockup Builder dar. Dabei handelt es sich um ein auf Silverlight basierendes Werkzeug, das sowohl online als auch offline genutzt werden kann (wobei auch für die Offline-Version eine Internetverbindung benötigt wird).

Der Editor bietet ein breites Repertoire an vorgefertigten User Interface-Elementen (Buttons, Texte, Auswahllisten, Video-Player, mobile Widgets, etc.) und überzeugt durch intuitive Bedienung sowie ein schlichtes Design. Elemente können einfach per Drag-and-Drop auf die Arbeitsfläche gezogen und anschließend transformiert werden. Zudem können gleich mehrere voneinander unabhängige Screens angelegt werden, die jeweils unterschiedliche Layouts beinhalten können. Auch ein Ebenen-Management ist in dem Tool integriert. Fertige Mock-Ups können als PNG oder PDF exportiert und lokal gespeichert werden. Zudem bietet die Anwendung einen Präsentationsmodus.
In seiner aktuellen Form ist der Mockup Builder noch kostenlos und wen die rund 6 MB große Installation des Silverlight-Plugins nicht zurückhält, sollte sich das Tool ansehen.

SpryMap: Widget für Click-and-Drag-Funktionalität

Schon etwas älter, aber immer noch interessant dürfte das JavaScript-Widget SpryMap sein, mit dem sich ein beliebiges DOM-Element mit einer Click-and-Drag-Funktionalität (ähnlich wie in Google Maps) belegen lässt. Eine solche Funktionalität eignet sich besonders gut für größere Grafiken (wie etwa Karten oder detaillierte Abbildungen), die mit einer Interaktion verknüpft werden sollen.

SpryMap bietet verschiedene Optionen, die ähnlich wie bei einem jQuery-Plugin beim Aufruf des Skripts als Parameter übergeben werden können:

• var map = new SpryMap({
• id : "",
• width: 800,
• height: 800,
• startX: 0,
• startY: 0,
• scrolling: true,
• scrollTime: 300,
• lockEdges: true,
• cssClass: ""
• });

Eine Demo von SpryMap findet sich auf dieser Seite. Das Skript kann auf der Website des Entwicklers heruntergeladen werden und beträgt gerade einmal 2,8 KB.