Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

tiltshift.js: „Instagram Light“ für jQuery

    tiltshift.js: „Instagram Light

Tiltshift.js ist ein jQuery Plugin, das mit Hilfe von CSS3 tolle Blur-Effekte für Fotos in euren Web-Projekten erzeugen kann. Was das Plugin kann, wie ihr es benutzt und wo die Grenzen liegen, zeigen wir euch in diesem Artikel.

Tiltshift.js bringt Bildbearbeitung vom Server zum Client. In einem früheren Artikel haben wir uns mit serverseitigen Bildbearbeitung mit PHPImageWorkshop beschäftigt. Das ist aber nur eine Möglichkeit, dem Endbenutzer veränderte Bilder zu liefern. Das jQuery Plugin tiltshift.js macht es möglich Fotos mit Hilfe von CSS3-Filtern mit einem Tiltshift Effekt zu versehen. Damit können ähnliche Ergebnisse wie bei Instagram erzielt werden.

Nachdem ihr das Plugin von Github oder der Projektseite von tiltshift.js heruntergeladen und samt dazugehörigem Stylesheet in euer Projekt eingebunden habt, könnt ihr die Effekte auf ausgewählte Bilder anwenden.

jQuery(document).ready(

function(){

$('.tiltshift').tilstShift();

}

);

Der oben gelistete Code wendet den Effekt auf alle Bilder der .tiltshift-Klasse an. Um die Parameter einstellen zu können, müsst ihr einen Satz von Attributen im img-Tag der jeweiligen Bilder mit HTML5 data attributes festlegen:

<img src="images/wasserfall.jpg" data-position="50" data-blur="2" data-focus="20" data-falloff="10" data-direction="45">

Das Listig erzielt folgenden Effekt:

tiltshift.js in Aktion
tiltshift.js in Aktion (Foto: Felix Jäger)

Schlüsseln wir die Attribute auf:

  • -position (0-100): Position an der das Bild scharf ist
  • -blur (0-x): Blur-Radius in Pixel (hier wird 1 oder 2 als Wert empfohlen)
  • -focus (0-100): Der Bereich, der scharf bleibt. Ein Wert von 10 würde hierbei 1/10 des Bildes scharf lassen
  • -falloff (0-100): Die Fläche zwischen voller Schärfe und komplettem Blur. Je höher der Wert, desto flüssiger der Übergang zwischen scharfem und unscharfem Bereich.
  • -direction (x, y oder 0-360): Der Verlauf der Schärfe. Kann entweder auf der X- und Y-Achse oder in einem beliebigen Winkel verlaufen.
So können ohne größeren Aufwand coole Effekte für Fotos erzielt werden.

tiltshift.js - brauche ich das?

Der größte Vorteil des Plugins ist neben der einfachen Nutzung, dass man die Serverlast für Bildverarbeitung verringern kann, da die eigentliche Arbeit auf den Browser ausgelagert wird. Auch könnte man das Plugin für Vorschauzwecke nutzen, bevor man die eigentliche Bildbearbeitung an einer größeren Version des Bildes vom Server machen lässt. Eine klare Schwächte des Plugins: Es funktioniert derzeit nur im Safari und Chrome. Eine Ausweitung auf weitere Browser ist aber in Zukunft geplant.
Wer jetzt schon selbst einen Blick auf tiltshift.js werfen möchte, schaut sich am besten auf der Projekteseite von tiltshift.js um oder lädt einfach das Try It Yourself Paket herunter, dass wir für euch vorbereitet haben.

Über den Autor

Ilja bigIlja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

1 Reaktionen
begs
begs

Sehr schönes Ding!

Das Bild im Try It Yourself Paket ist allerdings reichlich ungeeignet für diesen Effekt :)

Aber danke für diesen Tipp, das nutze ich bestimmt mal für das ein oder andere Projekt.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen