Site icon Puneet Sharma – Freelance Web Developer

Hammer.js adds touch gestures to web pages

Puneet Sharma
Hammer JS

Hammer JS

Hammer.js adds touch Gestures to web page
Hammer.js adds touch Gestures to web page

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:

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/

Exit mobile version