Below is the same example but rather that using the range slider it uses mouse movement on the canvas. I didn’t bother to do cross-browser stuff here so it will probably will not work right in Firefox because of the different way in which it deals with mouse position. Use Chrome for the optimal viewing experience. The code is below the example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var context;
var destx = 0;
var x = 0;
var ind;
var offset;

var photos = new Array();
for(var i=1; i<15; i++) {
    var im = new Image();
    im.src = "p" + i + ".jpg";
    photos.push(im);   
}

function init() {
    context = document.getElementById('canvas').getContext('2d');  
    canvas.addEventListener('mousemove', function(e) {
        x = e.offsetX / 670 * 8710;
    }, false);
    setInterval(loop, 1);
}

function loop() {
    destx += (x - destx) * 0.04;
    ind = Math.floor(destx/670);
    offset = destx % 670;
    context.drawImage(photos[ind], offset, 0, 670-offset, 503, 0, 0, 670-offset, 503);
    context.drawImage(photos[ind+1], 0, 0, 670, 503, 670-offset, 0, 670, 503);
}