JSFiddle - React, Tailwind, and code Playground

by Felipe Kautzmann

HTML

<script src="https://raw.github.com/EightMedia/hammer.js/master/hammer.js"></script>
<head>
    <meta name="viewport" content="initial-scale=0.51, user-scalable=no" />
</head>
<body>
    <div id="container">
        <div id="log"></div>
        <div id="footertext">Image:</div>
        <div id="imgcontainer">
            <img id="kitten" style="width: 100%; height: 100%" src="http://i.ytimg.com/vi/DXUAyRRkI6k/maxresdefault.jpg" />
        </div>
    </div>
</body>

CSS

body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
#container {
    width: 500px;
    height: 500px;
    background: rgba(59, 103, 158, 1);
    color: #fff;
    padding: 40px;
    overflow: hidden;
}
#log {
    background: rgba(53, 94, 149, 1);
    width: 480px;
    height: 80px;
    padding: 10px;
}
#imgcontainer {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

JavaScript

var p = $('<p />');

function log(msg) {
    $('#log').text(msg);
}

console.log('hello')

var hammer = new Hammer(document.getElementById("container"));

hammer.ontransformstart = function (ev) {
    console.log("ontransformstart");
    console.log(ev);
    log("onTransformStart");
};
hammer.ontransform = function (ev) {
    console.log("ontransform");
    console.log(ev);
    transformImage(ev);
    log("onTransform");
};
hammer.ontransformend = function (ev) {
    console.log("ontransformend");
    console.log(ev);
    log("onTransformeEnd");
};

$img = $("#kitten");
H = $img.height();
W = $img.width();

function transformImage(ev) {
    $img.css({
        height: H * ev.scale,
        width: W * ev.scale
    });
}