Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte

      Bayreuth

      Berlin

      Bonn

      Dortmund

      Dresden

      Duisburg

      Düsseldorf

      Essen

      Frankfurt am Main

      Hamburg

      Hannover

      Köln

      Leipzig

      München

      Nürnberg

      Stuttgart

      Wien

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte

      Bayreuth

      Berlin

      Bonn

      Dortmund

      Dresden

      Duisburg

      Düsseldorf

      Essen

      Frankfurt am Main

      Hamburg

      Hannover

      Köln

      Leipzig

      München

      Nürnberg

      Stuttgart

      Wien

      Zürich

Agentur eintragen →
Dr. Web » CSS » tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery

tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dieter Petereit
  • 7. September 2012
Bookmarke mich
Share on pocket

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
Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Agenturpartner

JOHDA Webdesign

Berlin

Der Informations­designer

Kaufbeuren

Niels Neumann Online Marketing

Limburgerhof

Berlin Translate

Berlin

Homepage & Design Heroes GmbH

Balingen

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

CSS3: So zentrierst du Elemente richtig

Was soll daran schwierig sein, Elemente in CSS zu zentrieren? So magst du spontan denken. Wenn du dich mit dem Thema jedoch schon öfter befasst hast, weisst du auch, dass Zentrierung manchmal zu einer echten Herausforderung werden kann. Im folgenden Beitrag zeige ich dir fünf Methoden, Elemente und Schriftzüge in HTML mit Hilfe von CSS3 zu zentrieren.

 →   

Lizenzfreie, kostenlose Bilder und Illustrationen für alle!

Kostenlose Fotos kann man immer gebrauchen. Sie zu finden, ist nicht ganz so einfach, denn häufig musst du doch zahlen, oder teils abstruse Lizenzen einhalten. Tust du das nicht, kann es schnell zur Abmahnung kommen.

 →   

10 phantastische Photoshop-Alternativen, fast alle kostenlos

Adobe Photoshop ist der Platzhirsch, doch es gibt kostenlose Photoshop-Alternativen, die je nach Bedarf dem großen Bruder in nichts nachstehen. Zeit zu wechseln?

 →   

0 Antworten zu „tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery“
— was ist Deine Meinung?

  1. Stefan sagt:
    7. September 2012 um 16:45 Uhr

    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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.