Drücke die Tasten ◄ ► für weitere Artikel  

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

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: „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 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.

60 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
2 Antworten
  1. von begs am 06.11.2012 (17:14Uhr)

    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.

  2. von Fundstücke – November 2012 | Niklas K… am 01.12.2012 (18:02Uhr)

    [...] tiltshift.js: „Instagram Light” für jQuery Fundstücke – Oktober 2012 » Tags:DesignDownloadFundstückFundstückegratisMonatMonatlichNovemberSammlungWebdesign [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema jQuery
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

10 nützliche JavaScript-Funktionen und jQuery-Plugins
10 nützliche JavaScript-Funktionen und jQuery-Plugins

Fast täglich werden neue JavaScript-Bibliotheken und -Plugins veröffentlicht. Einige nützliche Helfer und Effekte haben wir in diesem Artikel zusammengetragen. » weiterlesen

„One Page Scroll“ – Apples Webdesign für jedermann
„One Page Scroll“ – Apples Webdesign für jedermann

Apple überrascht eigentlich immer mit ansprechenden UI-Designs bei der Produktpräsentation. Dieser Artikel zeigt euch, wie ihr mit „One Page Scroll“ eine Landingpage ähnlich der für das... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen