スマホやタブレットではタップ・スワイプ・ピンチ等のタッチジェスチャーで操作しますが、それを簡単に実装できるHammer.jsを使ってみます。
今回はHammer.jsを使ってタップとスワイプイベント(タッチジェスチャー)を表示する方法をご紹介します。
Contents
ディスプレイ広告
タップやスワイプイベント(タッチジェスチャー)を表示するタップやスワイプエリアのCSS記述
※lightgallery.min.cssファイルを読み込み明日。タップ・スワイプエリアとタップ・スワイプ時のstyleの記述です。必要に応じて変更して下さい。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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" />
タップやスワイプイベント(タッチジェスチャー)を表示するタップ・スワイプエリアのHTML記述
※タップ・スワイプエリア(id=”tapswp”)を用意します。
<div class="tapwrap"> <div id="tapswp"></div> </div>
Hammer.jsを使ってタップやスワイプイベント(タッチジェスチャー)を表示するタップ・スワイプ時のJavaScript記述
※ダウンロードしたjquery.jsとhammer.min.jsファイルを読み込みます。グレーのエリア(#tapswp)をタップするとタップ跡が残り、左右どちらかにスワイプするとスワイプメッセージを表示する処理です。
<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 }); //タップ時の処理 $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" }); }); //スワイプ時の処理 $obj.on("swipeleft", function(event) { $tsarea.append("<div class='swpmsg'>左スワイプしました</div>"); $tsarea.find(".swpmsg").last(); }); $obj.on("swiperight", function(event) { $tsarea.append("<div class='swpmsg'>右スワイプしました</div>"); $tsarea.find(".swpmsg").last(); }); }); </script>
Hammer.jsを使ったタップとスワイプイベント(タッチジェスチャー)を表示するデモページ
Hammer.jsを使ったタップとスワイプイベント(タッチジェスチャー)を表示するデモ
Hammer.jsのソース元
以下がソース元になります。以下からhammer.min.jsをダウンロードできます。
Hammer.JS
※流用される場合は自己責任でお願いします。
デモページ