Javascriptでスワイプ処理

Javascriptでスワイプ処理:

WebサイトやUI作成時に使えるようメモ。

jQuery swipeイベントよりも、スワイプ感度の指定を簡単に。

また、使用例ではjQueryを使っていますが、jQuery無しでも使用可能。

1　サンプル

画面を右か左にスワイプするとページが切り替わる。

See the Pen zMdoQv by snst.lab (@snst-lab) on CodePen.

2　関数の定義

/** 
* @function HTMLElement.prototype.swipe　HTML要素のスワイプを検知する関数 
* @string direction  スワイプの方向(left, right, up, down) 
* @fucntion callback  スワイプイベント時に実行するコールバック関数 
* @int sensitivity  スワイプの感度。値が大きいほど小さい動きで発火する。デフォルトは5 (画面サイズ/5のスワイプで発火) 
*/ 
HTMLElement.prototype.swipe = function(direction,callback,sensitivity){ 
  const self = this; 
  const sens =  Object.prototype.toString.call(sensitivity)!=='[object Number]' || sensitivity <= 0 ? 5 : sensitivity; 
  switch(direction){ 
    case 'left': 
      self.addEventListener('touchstart', function (event) { 
        self.removeEventListener("touchstart",null,false);  //<--イベントリスナ解除しておく。2回目以降、要素に触れただけで発火してしまうので。 
        var position = event.changedTouches[0].pageX; 
        self.addEventListener('touchend', function (event) { 
          self.removeEventListener("touchend",null,false); 
          if (event.changedTouches[0].pageX < position - screen.width / sens){ 
             callback(self);   //<--callbackの第一引数でHTML要素を参照 
          } 
          position = 0; 
        }); 
      },false); 
      break; 
    case 'right': 
      self.addEventListener('touchstart', function (event) { 
        self.removeEventListener("touchstart",null,false);   
        var position = event.changedTouches[0].pageX; 
        self.addEventListener('touchend', function (event) { 
          self.removeEventListener("touchend",null,false);   
          if(event.changedTouches[0].pageX > position + screen.width / sens){ 
             callback(self); 
          } 
          position = screen.width; 
        }); 
      },false); 
      break; 
    case 'up': 
      self.addEventListener('touchstart', function (event) { 
        self.removeEventListener("touchstart",null,false);   
        var position = event.changedTouches[0].pageY; 
        self.addEventListener('touchend', function (event) { 
          self.removeEventListener("touchend",null,false);  
          if(event.changedTouches[0].pageY < position - screen.height / sens){ 
             callback(self); 
          } 
          position = 0; 
        }); 
      },false); 
      break; 
    case 'down': 
      self.addEventListener('touchstart', function (event) { 
        self.removeEventListener("touchstart",null,false);   
        var position = event.changedTouches[0].pageY; 
        self.addEventListener('touchend', function (event) { 
          self.removeEventListener("touchend",null,false);  
          if(event.changedTouches[0].pageY > position + screen.height / sens){ 
             callback(self); 
          } 
          position = screen.height; 
        }); 
      },false); 
      break; 
  } 
} 
 

3　使用例

HTML

<div class='wall' page='1' style='background:blue;left:0;'></div > 
<div class='wall' page='2' style='background:green;left:100vw;'></div > 
<div class='wall' page='3' style='background:red;left:-100vw;'></div > 

CSS

.wall{ 
  position:fixed; 
  width:100vw;  
  height:100vh; 
} 

Javascript

$('.wall').each(function(){ 
    this.swipe('left',function(dom){ 
        const next = Number($(dom).attr('page'))+1 > 3 ? 1 : Number($(dom).attr('page'))+1; 
        const prev = Number($(dom).attr('page'))-1 < 1 ? 3 : Number($(dom).attr('page'))-1; 
        $(dom).animate({'left':'-100vw'},500); 
        $('.wall[page='+next+']').animate({'left':'0'},400); 
        $('.wall[page='+prev+']').css({'left':'100vw'}); 
    },10);  //<-- 画面サイズ/10の動作で発火 
    this.swipe('right',function(dom){ 
        const next = Number($(dom).attr('page'))-1 < 1 ? 3 : Number($(dom).attr('page'))-1; 
        const prev = Number($(dom).attr('page'))+1 > 3 ? 1 : Number($(dom).attr('page'))+1; 
        $(dom).animate({'left':'100vw'},500); 
        $('.wall[page='+next+']').animate({'left':'0'},400); 
        $('.wall[page='+prev+']').css({'left':'-100vw'}); 
    },10); 
});