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:
- CSS3 Filters: Altering HTML and Images with just CSS – inserthtml
- tiltShift.js – noeltock.com
- noeltock / tiltShift.js – Github
0 Antworten zu „tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery“
— was ist Deine Meinung?
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