ZingTouch: Umfangreiche Gestenerkennung per JavaScript

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Die Wahrscheinlichkeit, dass deine Website über ein Smartphone oder Tablet angesteuert wird, wächst beständig. Die mobile Internetnutzung nimmt nach wie vor zu und es wird daher zunehmend wichtig, dass eine Website die besondere Bedienung per Touchdisplay berücksichtigt. Neben einfachen Taps haben sich zahlreiche Gesten etabliert, mit denen Mobilgeräte gesteuert werden. Mit ZingTouch steht dir eine umfangreiche JavaScript-Bibliothek zur Verfügung, die dir die Bedienung deiner Website über Gesten ermöglicht.

Tap-Gesten

Standardgesten auch für mehrere Finger

Grundsätzlich stellt dir JavaScript alle Möglichkeiten zur Verfügung, verschiedene Gesten zu interpretieren. Mit den Touch-Events fragst du zum Beispiel Berührungen auf dem Display ab und zeichnest Bewegungen auf. Dabei ist es möglich, mehrere Finger, die sich gleichzeitig auf dem Display befinden, nachzuhalten.

Um die verschiedenen gängigen Gesten interpretieren zu können, gibt es ZingTouch. Die JavaScript-Bibliothek kann sowohl einfache Taps als auch Taps mit mehreren Fingern interpretieren und unterschiedlich darauf reagieren.

Drehungen auf dem Display oder das Auseinander- und Zusammenziehen von Fingern erkennt ZingTouch ebenfals und ermöglicht so, auf unterschiedliche Gesten reagieren zu können.

Beispiele auf CodePen

Beispiele auf CodePen

ZingTouch einbinden und Gesten abfragen

Um ZingTouch nutzen zu können, muss die Bibliothek zunächst in dein HTML-Dokument eingebunden werden. Anschließend erstellst du eine sogenannte Region, die auf eine bestimmte Geste reagieren soll. Eine solche Region ist ein beliebiges HTML-Element.

var region = ZingTouch.Region(document.getElementById("container"));

Im Beispiel wird der Variablen „region“ per „ZingTouch.Region()“ das HTML-Element mit der ID „container“ zugewiesen. Im nächsten Schritt wird eine Geste definiert, auf die reagiert werden soll.

var geste = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 1000
});

Im Beispiel wird per „ZingTouch.Tap()“ ein Tap definiert. Diesem kannst du verschiedene Parameter übergeben. Hier werden per „numInputs“ die Anzahl der Berührungspunkte angegeben, die auf die Region erfolgen müssen. Außerdem wird per „maxDelay“ in Millisekunden angegeben, wie lange der Tap maximal dauern darf.

Im konkreten Fall müssen also zwei Finger für maximal eine Sekunde auf der Region platziert sein. Im letzten Schritt wird die Geste per „bind()“ an die Region gebunden und eine Funktion angegeben, die bei erfolgreich ausgeführter Geste gestartet werden soll.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
region.bind(document.getElementById("container"), geste, function(e) {
  console.log("Tapped.");
});

Dieses einfache Beispiel sorgt dafür, dass per Zwei-Finger-Tap auf das Element mit der ID „container“ in der Konsole „Tapped.“ geschrieben wird.

Sechs Gesten individuell konfigurierbar

Rotate-Geste

Rotate-Geste

Neben recht einfachen Tap-Gesten sind noch fünf weitere Gesten möglich. So kannst du Drehungen per Rotate-Geste, Auseinander- und Zusammenschieben per Expand- und Pinch-Geste, Umkreisen per Pan-Geste und klassisches Wischen per Swipe-Geste realisieren.

Für jede Geste stehen dir unterschiedliche Konfigurationsmöglichkeiten zur Verfügung. So gibst du bei der Swipe-Geste beispielsweise die Geschwindigkeit an, mit der die Geste ausgeführt werden muss.

new ZingTouch.Swipe({
  escapeVelocity: 0.25,
});

Für jede Geste gibt es auch Rückgabewerten, die ausgelesen und ausgewertet werden können. So gibt die Swipe-Geste zum Beispiel einen Winkel wieder, der die Richtung der Wischgeste darstellt.

region.bind(document.getElementById("container"), "swipe", function(e) {
  console.log(e.detail.data[0].currentDirection";
});

Im Beispiel wird die Geste ohne zusätzliche Parameter einfach an die „bind()“-Methode übergeben. Bei erfolgreicher Durchführung der Geste wird der Richtungswinkel „currentDirection“ in die Konsole geschrieben.

Umfangreiche Dokumentation

Umfangreiche und anschauliche Dokumentation

Umfangreiche und anschauliche Dokumentation

ZingTouch ist ein umfangreiches Werkzeug, mit dem du alle gängigen Gesten abdeckst und diese ohne großen Aufwand in deine eigenen mobilen Webprojekte implementierst. Es gibt eine umfangreiche Dokumentation mit zahlreichen Beispielen auf CodePen.

Die Bibliothek steht unter der freien MIT-Lizenz. Du kannst ZingTouch also auch kommerziell einsetzen.

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Franz Meyer
Gast

Kann man damit auch eine Bildergalerie mit einer touch & swipe ausstatten bzw. diese Funktion ergänzen, auch wenn man nicht viel von Java Skript versteht? Eine Bildergalerie wie beispielsweise diese https://codecanyon.net/item/jquery-lightbox-evolution/115655?s_rank=1

wpDiscuz