tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery
Sponsorenliebe
Webhosting. Einfach intelligent.
Das deutsche Shop-Plugin
Webhosting. Einfach intelligent.
Das deutsche Shop-Plugin
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
E-Book: Online-Marketing-Basics
Was ist Online-Marketing genau und wie funktioniert es?
Diese Frage beantwortet unser aktuelles Buch. Dabei gehen wir an alle Teilbereiche und liefern fundierte Einstiege in Content-Marketing, E-Mail-Marketing, Social-Media-Marketing, Video-Marketing, Gutschein-Marketing und vielem mehr.
E-Book: User-Experience-Revolution
Wenn dein Design kundenzentriert ist, kommt der Erfolg von ganz alleine!
Wer kennt nicht die Firmen, die sich selbst feiern für irgendwelche Preise, die sie aus ihrer Branche erhalten haben, oder solche, die die Mitarbeiter nach Gehorsam und Fleiß belohnen und den Kunden eigentlich nur als notwendiges Übel betrachten?
Paul Boag stellt diese Betrachtung auf den Kopf und hilft dir, Design künftig aus den Augen des Kunden zu betreiben.
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