custom swipe event indicated by touchmove event

Question

I am trying to create a sort of plugin or event that css transitions (moves) elements via swipe on ipad. For this I am using so far the brillant working little code snippet of c

Answer 1

The code is actually made for low cpu devices , high performance .. leaving out complex calculations inside the touchmove. Anyway to animate your elements (between touchstart & touchend) a simple solution is to use css (not jquery or other resourceintensive plugins).

then just think logically... you can't determine in wich direction you swipe at the touchstart... you can do that at the touchend event after doing some math. OR while touchmove wich destroys the whole code, as mentioned above.

OPTION 1 (simple & high performance)

DEMO

http://jsfiddle.net/z7s8k9r4/

Add some lines....

(function(D){
 var M=Math,abs=M.abs,max=M.max,
 ce,m,th=20,t,sx,sy,ex,ey,cx,cy,dx,dy,l,
 T,  //<- THE TARGET
 f={
  touchstart:function(e){
    t=e.touches[0];
    sx=t.pageX;
    sy=t.pageY;
    T=e.target; T.classList.add('sw'); //<- ADD A CUSTOM CLASS FOR SWIPES
  },
  touchmove:function(e){
    m=1;
    t=e.touches[0];
    ex=t.pageX;
    ey=t.pageY
  },
  touchend:function(e){
    ce=D.createEvent("CustomEvent");
    ce.initCustomEvent(m?(
    max(dx=abs(cx=ex-sx),dy=abs(cy=ey-sy))>th?
    dx>dy?cx<0?'swl':'swr':cy<0?'swu':'swd':'fc'
    ):'fc',true,true,e.target);
    e.target.dispatchEvent(ce);
    m=0;
    T.classList.remove('sw');  //<- REMOVE THE CLASS
  },
  touchcancel:function(e){
    m=0
  }
 }
 for(l in f)D.addEventListener(l,f[l],false)
})(document);

now define the css class

element.sw{
 background-color:yellow;
}

use the proper (HW) animation for mobile devices on your element

element{
 background-color:green;
 -webkit-transition:background-color 200ms ease;
}

this is a simple and dirty solution , it works. just keep it simple.

the class will apply only on defined elements. ;)

OPTION 2

forget the code above...

Here is another "performant" way to do a "snap" animation using "bounce".

the code is a little more complex... and uses the mouse.. replace the mouse events with touch events.

http://jsfiddle.net/xgkbjwxb/

and with more data points

http://jsfiddle.net/xgkbjwxb/1/

note: don't use jquery or complex js plugins in mobile devices.

Extra

As it's really problematic to work on pc without a touch interface i added some lines that force the mouse to simulate touches based on my function requisites.

http://jsfiddle.net/agmyjwb0/

EDIT

this code should do what you want...

http://jsfiddle.net/xgkbjwxb/3/