Hammer.js adds touch gestures to web pages

Hammer is an open-source library that can recognize gestures made by touch, mouse, and pointer events. It doesn’t have any dependencies, and it’s small, only 7.34 kB minified + gzipped!

Supported gestures:

Pan
Pinch
Press
Rotate
SwipeTap

I just created a demo to experiment around with this cool javascript tool to detect user touch gestures on a web page. This is cool as it detects almost all major touch and swipes gestures done by mobile and touch device users.

Checkout the demo below by opening it in a new tab and on mobile or touch devices.

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/set1/hammerjs/index.html

DEMO Source

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hammer.js adds touch gestures to web pages</title>
  <meta name="description" content="Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents." />
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="robots" content="INDEX,FOLLOW" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <h1>Hammer.js adds touch gestures to web pages</h1>
    <p>Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents.</p>

    <div class="demo" style="margin-bottom:20px;">

      <h2>Do any guesture on the grey area provided below:</h2>
      <p>Try Pan, Pinch, Press, Rotate, Swipe, Tap</p>
      <style>
        #myElement {
          background: silver;
          height: 300px;
          text-align: center;
          font: 30px/300px Helvetica, Arial, sans-serif;
        }
      </style>
      <div id="myElement"></div>
      <script>
        var myElement = document.getElementById('myElement');
        var mc = new Hammer(myElement);
        mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });

        mc.on("panleft panright panup pandown tap press swipe pinch ", function(ev) {
          myElement.textContent = ev.type +" gesture detected.";
        });
      </script>

      <h2>RecognizeWith with Pinch and Rotate</h2>
      <style>
        #myElement2 {
          background: silver;
          height: 300px;
          text-align: center;
          font: 30px/300px Helvetica, Arial, sans-serif;
        }
      </style>
      <div id="myElement2"></div>
      <script>
        var myElement2 = document.getElementById('myElement2');
        var mc2 = new Hammer.Manager(myElement2);

        // create a pinch and rotate recognizer
        // these require 2 pointers
        var pinch = new Hammer.Pinch();
        var rotate = new Hammer.Rotate();

        // we want to detect both the same time
        pinch.recognizeWith(rotate);

        // add to the Manager
        mc2.add([pinch, rotate]);


        mc2.on("pinch rotate", function(ev) {
          myElement2.textContent += ev.type +" ";
        });
      </script>

      <div class="article-link" style="margin-top:20px;margin-bottom:20px;">
        <a href="https://webdevpuneet.com/hammer-js-add-touch-gestures-to-yur-webapp/" target="_blank" style="display: inline-block; color:blue:!important;text-decoration: none;border:1px solid blue;color:blue;line-height:1;border-radius:25px;font-size:14px;padding:5px 20px;display:inline-block;">View article and source code &raquo;</a>
      </div>

      <h2>SingleTap and DoubleTap</h2>
      <style>
        #myElement3 {
          background: silver;
          height: 300px;
          text-align: center;
          font: 30px/300px Helvetica, Arial, sans-serif;
        }
      </style>
      <div id="myElement3"></div>
      <script>
        var myElement3 = document.getElementById('myElement3');

        // We create a manager object, which is the same as Hammer(), but without the presetted recognizers.
        var mc3 = new Hammer.Manager(myElement3);


        // Tap recognizer with minimal 2 taps
        mc3.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );
        // Single tap recognizer
        mc3.add( new Hammer.Tap({ event: 'singletap' }) );


        // we want to recognize this simulatenous, so a quadrupletap will be detected even while a tap has been recognized.
        mc3.get('doubletap').recognizeWith('singletap');
        // we only want to trigger a tap, when we don't have detected a doubletap
        mc3.get('singletap').requireFailure('doubletap');


        mc3.on("singletap doubletap", function(ev) {
          myElement3.textContent += ev.type +" ";
        });
      </script>
    </div><!-- End of demo code -->
</body>
</html>

Web link – http://hammerjs.github.io/

CDN for hammer.js – https://cdnjs.com/libraries/hammer.js

Checkout all examples here – https://hammerjs.github.io/examples/