hammer.js four directions pan/swipe test

hammer-js-four-directions-pan-swipe-test.markdown

hammer.js four directions pan/swipe test

A Pen by MinzCode on CodePen.

License.

index.html

<div id="container"></div>

script.js

$(document).ready(function(){
  var c = document.getElementById('container');
  var mc = new Hammer(c);
  mc.get('pan').set({ direction: Hammer.DIRECTION_ALL, threshold: 0 });
  mc.on("panup pandown panleft panright tap press", function(ev) {
    
    switch(ev.type){
      case 'panup': cl = 'up'; break;
      case 'pandown': cl = 'down'; break;
      case 'panleft': cl = 'left'; break;
      case 'panright': cl = 'right'; break;
    }
    $("#container")
      .removeClass('up down left right')
      .html(cl+
            '<br/>X: '+ev.deltaX+' - Y:'+ev.deltaY+
            '<br/>Time: '+ev.deltaTime+
            '<br/>'+ev.distance+
            '<br/>'+ev.eventType+'<br/>'+ev.isFinal)
      .addClass(cl);
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

style.css

*,
*::after,
*::before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
body {
  perspective: 2000px;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Roboto';
  font-weight: 300
}
#container{
  width:400px;
  height:400px;
  background:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  transition: all .5s;
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
  color:#fff;
}
#container.right{
  background:#3c3;
}
#container.left{
  background:#c33;
}
#container.up{
  background:#36c;
}
#container.down{
  background:#f90;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700,100|Montserrat:400,700|Catamaran:400,100" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />