Dieter Petereit 7. September 2012

tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

tiltShift.js ist eine kleine optische Sensation. Unter Verwendung von CSS 3, namentlich den neuen CSS3 Image Filters, die derzeit nur von Chrome und dem Safari 6 unterstützt werden, verwirklicht Entwickler Noel Tock den beliebten Tiltshift-Effekt für beliebige Bilder. Natürlich müssen diese von der Motivwahl her geeignet sein. Das ist aber auch bei Fake-Tiltshift in Photoshop und anderen Apps nicht anders.

HIER: jQuery & JavaScript bis das der Webdoktor kommt.

tiltShift.js: CSS3 Image Filters clever genutzt

Noel Tocks jQuery-Plugin ist, man muss es so klar sagen, nur eine Art Drahtmodell. Es funktioniert ausschließlich in Chrome und Safari 6 und ist natürlich abhängig von der Grundqualität der zu bearbeitenden Bilder. Das zu fokussierende Motiv sollte in der Bildmitte liegen und aus möglichst großer Entfernung etwas von oben herab fotografiert worden sein. Der Effekt würde auch auf andere Bilder angewendet werden, aber nicht nach Tiltshift aussehen.

Die Parameter zum JavaScript erlauben eine recht genaue Festlegung des zu fokussierenden Bildausschnitts. Parameter werden mittels der neuen HTML5 Data-Attribute übergeben. Mittels data-position legt man die Position des Fokus fest. Werte sind gültig von 0 bis 100, ein Wert von 50 würde dementsprechend die Bildmitte bedeuten. Kombiniert mit data-focus, ebenfalls von 0 bis 100, ist der Ausschnitt recht passgenau zu bestimmen. So würde ein Wert von 10 bedeuten, dass 10 Prozent des Bildes um den Fokuspunkt herum scharf gestellt blieben, während der Rest mit Blur, also Unschärfe versehen würde.

Data-blur legt den entsprechenden Unschärferadius fest, während data-falloff die Größe des Bereiches zwischen komplettem Fokus und kompletten Blur definiert. Sie sehen, der Effekt ist recht genau und fein zu tunen. Die Effekt-Batterie wird auf einen DIV-Wrapper angewendet, den man entsprechend via CSS stylen sollte, um keine optischen Auffälligkeiten zu riskieren.

tiltShift.js steht unter der GNU GPL Lizenz zur freien Verfügung zu jedem legalen Zweck bereit. Das Projekt ist ganz frisch auf Github und zeigt für mich recht deutlich, in was für eine spannende Zeit wir Webentwickler uns bewegen.

Links zum Beitrag:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Ist ja witzig :D!

    Sehr cooler Effekt. Aber auch hier gilt wieder, leider nicht in allen Browsern möglich, wie oben schon beschrieben :(, schade eigentlich.

    Ich wünsche mir ein Internet in dem jeder Browser alles kann…naja dann würde es wahrscheinlich nur noch einen geben :P.

    Schönes Wochenende

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück