Pinching with Hammer.js

by Rene Rubio

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<p>
    Pinch anywhere. The blue square should expand or shrink (to a degree). The red circle should stay the same.
</p>

<div class="wrapper">
    <div class="wrap">
        <div id="circle"></div>
    </div>
    <div class="wrap">
        <div id="square"></div>
    </div>
</div>

CSS

body, html {
    width:100%;
    height:100%;
}

.wrapper {
    width:100%;
    height:50%;
    position: relative;
    display: table;
    text-align: center;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
}

#square {
    width:200px;
    height:200px;
    background:blue;
    margin:0 auto;
}

#circle {
    border-radius:200px;
    width:200px;
    height:200px;
    background:red;
    margin:0 auto;
}
</style>
<meta name="viewport" content="width=device-width">
<style>

JavaScript

var dom   = document.body,
    width = parseInt($('#square').css('width')),
    vel   = 5.0,
    min   = 100,
    max   = 400,
    scale;

function gestureChange( e ) {
    e.preventDefault();

    scale = e.scale;
    
    var tempWidth = width * scale;

    if ( tempWidth > max ) tempWidth = max;
    if ( tempWidth < min ) tempWidth = min;

    $( '#square' ).css( {
        width  : tempWidth + 'px',
        height : tempWidth + 'px'
    } );
}

function gestureEnd( e ) {
    e.preventDefault();
    
    width = parseInt( $( '#square' ).css( 'width' ) );
}

Hammer( square ).on( 'pinch', gestureChange );