Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » Touchscreens per Geste steuern mit Hammer.js

Touchscreens per Geste steuern mit Hammer.js

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 27. April 2012

Inhaltsverzeichnis

Wer seine Website für Smartphones und Tablets fit machen möchte, wird um Gestensteuerung nicht herum kommen. Mit Hammer.js gibt es eine kleine JavaScript-Bibliothek, mit der sich beliebige HTML-Elemente um Gesten erweitern lassen. Hammer.js ist keine Konkurrenz für ausgewachsene Frameworks, dafür aber wesentlich einfacher zu verwenden.

Hammer.js einbinden

Zunächst muss Hammer.js in die Website eingebunden werden. Die Datei kann entweder heruntergeladen und auf dem eigenen Webspace platziert oder direkt aus dem GitHub-Repository der Entwickler verlinkt werden:

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

Anschließend wird eine Instanz der Hammer-Funktion auf ein HTML-Element angewendet:

var hammer = new Hammer(document.getElementById("element"));

hammerjs screenshot Touchscreens per Geste steuern mit Hammer.js
Hammer.js

Über Hammer.js lassen sich verschiedene Gesten auf Elemente anwenden. Neben einfachem und doppeltem Berühren des Displays („Tap“ und „Double Tap“), gibt es langes Gedrückthalten („Hold“) und Bewegung über das Display („Drag“). Darüber hinaus lässt sich als Geste auch das Auseinander- und Zusammenziehen von zwei Fingern auf dem Display („Transform“) nutzen.

Auf Gesten reagieren

Auf jede Geste, die auf ein Element angewendet wird, lässt sich eine Funktion legen. So könnte man auf eine einfache Bewegungsgeste wie folgt reagieren:

hammer.ondrag = function(geste) {
  document.getElementById("ausgabe").firstChild.nodeValue = geste.distance;
}

Wird auf das Element „element“ eine Bewegungsgeste ausgeübt, wird die angegebene Funktion ausgeführt. Je nach Art der Geste gibt die Funktion Werte zurück, die sich für Animationen wie einen Bilderslide verwenden lassen. Das Objekt „distance“ gibt die über die Bewegung zurückgelegte Entfernung in Pixel an – also die Strecke, die der Finger auf dem Display zurückgelegt hat.

Für die Bewegungsgeste lässt sich auch die Richtung („direction“) der Bewegung (oben, unten, rechts oder links), der Winkel („angle“)  sowie die Entfernung auf der X- und Y-Achse („distanceX“ und „distanceY“) abfragen .

Hammer.js konfigurieren

Eine Instanz von Hammer.js kann individuell konfiguriert werden. Es gibt verschiedene Einstellungen, mit denen unter anderem die Definition einer Mindestdistanz möglich ist, die über eine Bewegung („Drag“) überwunden werden muss:

var hammer = new Hammer(document.getElementById("element"), { drag_min_distance: 100 });

Im Beispiel muss eine Bewegungsgeste über mindestens 100 Pixel stattfinden, damit die über „ondrag“ angegebene Funktion ausgeführt wird.

Fazit: Mit Hammer.js lassen sich sehr einfach Gesten anwenden und individuell einstellen. So können beispielsweise Slide-Navigationen oder Zoom-Funktionen realisiert werden. Hammer.js sollte im Werkzeugkasten eines Developers für mobile Webapps nicht fehlen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

iPower, trigger your leads. Logo der SEO Agentur für Berlin.

iPower AG

Berlin

Sparkman webdesign Frankfurt.

Webdesign Frankfurt | Sparkm4n

Dillenburg

Logo mit dem Schriftzug agenturwitt.

agenturwitt

Freiburg im Breisgau

Trend Maker Marketing Agentur Regensburg Logo

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

Michael Freitag Immobilien-Marketing München logo

Critch GmbH – Immobilienkanzlei FREITAG®

München

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „Touchscreens per Geste steuern mit Hammer.js“
— was ist Deine Meinung?

  1. Peter Nowak sagt:
    31. März 2014 um 23:09 Uhr

    Über diesen Artikel bin ich auf Hammer.js gestoßen und probiere derzeit einige Dinge aus. Leider ist die Dokumentation für Nichtprogrammierer, wie ich es bin, etwas mau. Wäre super, wenn mir jemand folgende Frage beantworten könnte: Ich habe mit Dreamweaver CS6 eine mobile App entwickelt, die aus einzelnen html Seiten besteht und in die einige jquery.mobile Funktionen eingebunden sind. Jetzt möchte ich zusätzlich mit Hammer.js die swipe Funktion einbauen, um per Wisch von meiner index.html auf die Inhalt.html Seite zu kommen und zurück. Hierfür habe ich das mitgelieferte mitgelieferte carousel eingebaut, was auch bestens funktioniert. Wie müssen aber die Zeilen
    #carousel li.pane1 { background: #42d692; }
    #carousel li.pane2 { background: #4986e7; }
    modifiziert werden, um von einer html Seite auf eine neue zu html Seite zu kommen? pane 1 wäre meine index.html und pane 2 meine Inhalt.html

    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.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

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

Aus unserem Magazin

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑