Hammer.js library + tutorials

Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents. Here we’ve collected key information about Hammer.js library, and tutorials about how to handle touch gestures in web projects.

Hammer.js and gestures

Hammer.js is a lightweight JS library, that can be used to control gestures on touch devices. Hammer has been tested on many mobile devices.

On a desktop browser the mouse can be used to simulate touch events with one finger. It supports gestures like: Tap, Double tap, Hold, Drag, Transform.

Getting Started

This small, dependency free library makes handling touch events very simple.

Example:

var hammer = new Hammer(document.getElementById("hammertime"));
hammer.ondoubletap = function(e){
  console.log("CAN touch this!");
};

There is also jQuery plugin available.

Hammer.js library
Hammer.js library

Another example:

// get a reference to an element
var stage = document.getElementById('stage');

// create a manager for that element
var mc = new Hammer.Manager(stage);

// create a recognizer
var Rotate = new Hammer.Rotate();

// add the recognizer
mc.add(Rotate);

// subscribe to events
mc.on('rotate', function(e) {
    // do something cool
    var rotation = Math.round(e.rotation);    
    stage.style.transform = 'rotate('+rotation+'deg)';
});

Homepage:

http://hammerjs.github.io

Examples:

http://hammerjs.github.io/examples

Docs:

http://hammerjs.github.io/getting-started

Stackoverflow topics:

http://stackoverflow.com/questions/tagged/hammer.js

Hammer.js tutorials:

http://www.webdevbreak.com/episodes/touch-gestures-hammerjs

http://creativedroplets.com/html5-and-multitouch-hammer-js

http://damien.antipa.at/2012/06/11/hammer-js-with-native-jquery-events

http://denvycom.com/blog/gear-2-gestures-using-hammer-js

Stop… Hammer.js time!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1