Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Inspiration » tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery

tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery

  • Aktualisiert am 5. Mai 2023
  • von Dieter Petereit
  • Inspiration
  •  

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.

tilt shift js.png tiltShift.js: Tiltshift-Effekte mit CSS3 und jQuery

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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.

Inhaltsverzeichnis

Lust auf mehr?

Mal was anderes: Mondrianismus im Webdesign

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst.

Retro-Design: Kunstwerke aus Audiokassetten von Benoit Jammes

Kinder der Siebziger und Achtziger dürften sich besonders für die “Skulpturen” interessieren, die wir euch heute zeigen wollen. Der französische Künstler Benoit Jammes fand einen Schuhkarton alter Audiokassetten in seinem Keller. Da er jedoch nicht mehr über ein entsprechendes Abspielgerät verfügte, entschloss er sich kurzerhand, die Tonträger aus dem akustischen Wirkungskreis in den visuellen zu überführen. Wir haben mit ihm darüber gesprochen…

Infografiken: So gehen sie viral, trotz starker Konkurrenz

Es klingt so einfach: Du trägst Daten zusammen, erstellst eine schicke Infografik und setzt sie auf die Website, um den Traffic zu erhöhen, Verkäufe anzukurbeln oder Leads zu generieren. Dabei bedenkst du zu selten, dass es bereits jede Menge Infografiken gibt, die in irgendeiner Ecke des weltweiten Netzes nur darauf warten, entdeckt zu werden – häufig erfolglos.

0 Antworten

  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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen