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

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:

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.

tiltshift.js - brauche ich das?

Über den Autor

Ilja 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.