Vorheriger Artikel Nächster Artikel

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

Tiltshift.js ist ein , das mit Hilfe von 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: „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 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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von begs am 06.11.2012 (17:14 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
WordPress-Bildergalerien: Die 10 schicksten Gallery-Plugins für WordPress
WordPress-Bildergalerien: Die 10 schicksten Gallery-Plugins für WordPress

Moderne Blogs bieten ihren Lesern nicht nur interessante Textbeiträge, sondern binden auch immer mehr multimediale Inhalte ein. Das trifft neben Videos vor allem auf Bilder zu. Zwar verfügt … » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

t3n intern: Wir suchen einen Frontend-Developer (HTML5/CSS/JS) (m/w) und verlosen 500 Euro!
t3n intern: Wir suchen einen Frontend-Developer (HTML5/CSS/JS) (m/w) und verlosen 500 Euro!

Unser Entwicklerteam braucht deine Unterstützung! Wir suchen ab sofort einen Frontend-Developer (m/w) und hier kommst du ins Spiel! Vielleicht kennst du jemanden, der geeignet ist und gar nichts … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen