Skip to content

Instantly share code, notes, and snippets.

@forresto

forresto/index.html

Last active December 20, 2015 07:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save forresto/6097596 to your computer and use it in GitHub Desktop.
Save forresto/6097596 to your computer and use it in GitHub Desktop.
Download ZIP
reduced case: pan scale zoom with multitouch (webkit only, css zoom, fake multitouch with shift+drag)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>pan scale zoom with multitouch</title>
<style>#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color: lightblue;
overflow: hidden;
}
#pan {
position: absolute;
top: 0;
left: 0;
width: 5000px;
height: 5000px;
}
#content {
position: absolute;
top: 0;
left: 0;
}
.item {
box-shadow: 0 0 2px 2px hsla(180, 100%, 60%, .8), 0 0 8px 4px hsla(230, 100%, 15%, 0.8);
color: black;
position: absolute;
width: 200px;
height: 200px;
background-color: white;
font-size: 75px;
}
#one { top: 10px; left: 10px; }
#two { top: 300px; left: 10px; }
#three { top: 10px; left: 300px; }</style>
<script type='text/javascript' src="http://eightmedia.github.io/hammer.js/dist/hammer.js"></script>
<script type='text/javascript' src="http://eightmedia.github.io/hammer.js/plugins/hammer.fakemultitouch.js"></script>
<script type='text/javascript' src="http://eightmedia.github.io/hammer.js/plugins/hammer.showtouches.js"></script>
</head>
<body>
<div id="container">
<div id="pan">
<div id="content">
<div id="one" class="item">one. . . . . .</div>
<div id="two" class="item">two. . . . . . </div>
<div id="three" class="item">three. . . . .</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(window).load(function(){
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
$("#pan").css({
transform: "translate3d(0, 0, 0) " +
"scale3d(1, 1, 1) ",
transformOrigin: "left top"
});
var $pinch = $("#pan");
var pinch = $pinch[0];
var currentZoom, startX, startY, originX, originY, scale, deltaX, deltaY;
var zoom = 1;
var panX = 0;
var panY = 0;
Hammer(pinch)
.on('transformstart', function (event) {
currentZoom = zoom;
startX = event.gesture.center.pageX;
startY = event.gesture.center.pageY;
originX = startX/currentZoom;
originY = startY/currentZoom;
$pinch.css({
transformOrigin: originX+"px "+originY+"px"
});
})
.on('transform', function (event) {
scale = Math.max(0.25/currentZoom, Math.min(event.gesture.scale, 6/currentZoom));
deltaX = (event.gesture.center.pageX - startX) / currentZoom;
deltaY = (event.gesture.center.pageY - startY) / currentZoom;
$pinch.css({
transform: "translate3d("+deltaX+"px,"+deltaY+"px, 0) " +
"scale3d("+scale+","+scale+", 1) "
});
})
.on('transformend', function (event) {
// Convert scale to zoom
zoom = currentZoom * scale;
zoom = Math.max(0.25, Math.min(zoom, 6));
$pinch.css({
// Reset transform
transform: "translate3d(0, 0, 0) " +
"scale3d(1, 1, 1) ",
zoom: zoom
});
})
.on('dragstart', function(event){
})
.on('drag', function(event){
$pinch.css({
transform: "translate3d("+event.gesture.deltaX/zoom+"px, "+event.gesture.deltaY/zoom+"px, 0) "
});
})
.on('dragend', function(event){
console.log(event);
$pinch.css({
// Reset transform
transform: "translate3d(0, 0, 0) "
});
// Convert transform to position
panX += event.gesture.deltaX/zoom;
panY += event.gesture.deltaY/zoom;
$("#content").css({
left: panX,
top: panY
});
})
});
//@ sourceURL=pen.js
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment