Panorama

by mmarcon

HTML

<div id="canvas">
    
</div>

CSS

body {
    background-color: #000;
}

#canvas {
    width: 300px;
    height: 234px;
    border: 5px solid #222;
    margin: 30px auto;
    border-radius: 2px;
}

JavaScript

var MYAPP = {
    PANORAMA_URL: 'http://farm4.static.flickr.com/3282/2516229836_25c4a5ee20_b_d.jpg',
    init: function() {
        var canvas, image, step = 10, steps = 0;
        canvas = Raphael('canvas', 300, 234);
        image = canvas.image (this.PANORAMA_URL, 0, 0, 1024, 234);
        image.translate (-1024/2 + 150, 0);
        image.drag (function(dx, dy) {
            if (steps * step >= 512 - 150 && dx > 0) return;
            if (steps * step <= -512 + 150 && dx < 0) return;
            dx < 0 ? steps -- : steps ++;
            this.translate (dx < 0 ? -step : step, 0);
        }, null, function(){
            console.log(image);
        });
    }
};

MYAPP.init();