Created
July 24, 2013 23:30
-
-
Save georgeOsdDev/6075600 to your computer and use it in GitHub Desktop.
Example of draggable css3 animation with Hammer.js.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hammer.js dragdrop with css3 animation example</title> | |
| <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> | |
| <style> | |
| h1 { | |
| margin: 30px; | |
| text-align: center; | |
| } | |
| .drag { | |
| position: absolute; | |
| background: #9fe1e7; | |
| border-radius: 50px; | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .defaultPosition{ | |
| left: 100px; | |
| top: 100px; | |
| } | |
| .transition { | |
| -webkit-transition:-webkit-transform 400ms cubic-bezier(0,0,0.25,1) | |
| } | |
| .drag1 { background: #42d692; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Drag the balls!</h1> | |
| <div class="drag drag1 defaultPosition"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/jquery.hammer.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> | |
| <script> | |
| var startTouche = []; | |
| $(".drag") | |
| .on("touchstart", function(ev) { | |
| var touches = ev.originalEvent.touches; | |
| for(var t=0,len=touches.length; t<len; t++) { | |
| var target = $(touches[t].target); | |
| startTouche.x = touches[t].pageX | |
| startTouche.y = touches[t].pageY | |
| } | |
| }) | |
| .hammer({ drag_max_touches:0}) | |
| .on("touch drag", function(ev) { | |
| var touches = ev.gesture.touches; | |
| ev.gesture.preventDefault(); | |
| for(var t=0,len=touches.length; t<len; t++) { | |
| $(".drag").css({ | |
| '-webkit-transform':'translate3d('+(touches[t].pageX - startTouche.x) +'px,'+ (touches[t].pageY - startTouche.y) +'px,0)', | |
| }); | |
| } | |
| }) | |
| .on("dragend", function(ev) { | |
| ev.gesture.preventDefault(); | |
| $(".drag") | |
| .addClass('transition') | |
| .css({ | |
| '-webkit-transform':'translate3d(0,0,0)', | |
| }). | |
| on('webkitTransitionEnd',function(){ | |
| $(this).removeClass('transition'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment