Are you familiar with Hammer.js, a library that makes it easy to implement essential touch gestures for smartphones and tablets? Hammer.js is a useful tool that allows intuitive use of gesture events such as tap and swipe. In this article, we will clearly explain how to use Hammer.js to display basic tap and swipe event processing.
What is Hammer.js?
Hammer.js is a JavaScript touch gesture library that enables the implementation of gesture events compatible with smartphones and tablets. It particularly supports gestures such as tap, swipe, pinch, and pan, making it ideal for adding rich interaction to the UI.
CSS Settings for Tap and Swipe Area
Before using Hammer.js, let’s style the area for displaying tap and swipe events with CSS. In this demo, we will create an area that displays a circular “tap mark” at the tapped location and shows a message when swiping left or right.
<style type="text/css">
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
line-height: 1.8em;
}
h1{
font-size:16px;
text-align:center;
font-weight:normal;
padding:10px 0;
position: relative;
}
.tapwrap{
width: 90%;
margin: 0 auto;
}
#tapswp {
width: 100%;
padding-bottom: 40%;
margin-bottom: 30px;
position: relative;
background-color: #cccccc;
}
#tapswp .tapato {
width: 48px;
height: 48px;
margin-left: -24px;
margin-top: -24px;
border-radius: 50%;
background: #555555;
position: absolute;
}
#tapswp .swpmsg {
width: 50%;
height: 50px;
line-height: 50px;
background: #fff;
text-align: center;
position: absolute;
left: 25%;
top: 10%;
font-size: 18px;
font-weight: bold;
}
</style>
<!-- lightgallery.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css" />
The lightgallery.min.css file is being loaded.
Setting Up the HTML Structure
Next, let’s create the HTML structure to display tap and swipe events. As shown below, prepare a tap and swipe area (id=”tapswp”) where we will add events.
<div class="tapwrap">
<div id="tapswp"></div>
</div>
JavaScript Implementation Using Hammer.js
To use Hammer.js, first, load the jQuery and Hammer.js libraries, jquery.js and hammer.min.js. Then, write JavaScript to add tap and swipe event processing. A circular tap mark will appear at the tapped position within the gray area (#tapswp), and when swiping left or right, a message saying “Swiped Left” or “Swiped Right” will be displayed.
<script src="./jquery-2.2.0.min.js"></script>
<script src="./hammer.min.js"></script>
<script type="text/javascript">
$(function() {
var $tapswparea = document.getElementById("tapswp"), $tsarea = $($tapswparea), $obj = new Hammer($tapswparea);
$obj.get("tap").set({ enable: true });
$obj.get("swipe").set({ enable: true });
// Tap event processing
$obj.on("tap", function(event) {
$tsarea.append("<div class='tapato'></div>");
$tsarea.find(".tapato").last().css({
"left": (event.pointers[0].pageX - $tsarea.offset().left) + "px",
"top": (event.pointers[0].pageY - $tsarea.offset().top) + "px"
});
});
// Swipe event processing
$obj.on("swipeleft", function(event) {
$tsarea.append("<div class='swpmsg'>Swiped Left</div>");
$tsarea.find(".swpmsg").last();
});
$obj.on("swiperight", function(event) {
$tsarea.append("<div class='swpmsg'>Swiped Right</div>");
$tsarea.find(".swpmsg").last();
});
});
</script>
Demo Page for Displaying Tap and Swipe Events Using Hammer.js
You can check the demo page for displaying tap and swipe events using Hammer.js from the link below.
Demo of displaying tap and swipe events using Hammer.js
Hammer.js Source
You can download the library from the official Hammer.js website. Please download the latest version from the link below.
Conclusion
In this article, we explained how to easily implement tap and swipe events using Hammer.js. By utilizing Hammer.js when creating interfaces for smartphones and tablets, you can significantly improve usability.
* Please use this information at your own discretion. Do not copy the Google Analytics tag inside the head tag of the demo page.
