HTML5 360 degree product view

<!-- HTML --> <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://code.createjs.com/easeljs-0.6.0.min.js"></script> <canvas id='canvas' width="465" height="465"></canvas> <!-- HTML --> /* CSS */ body { background-color: #CCCCCC; margin: 0; padding: 0; overflow: hidden; } canvas { position: absolute; } /* CSS */ // JS var stage; function init() { var canvas = document.getElementById("canvas"); if (!canvas || !canvas.getContext) return; stage = new createjs.Stage(canvas); stage.enableMouseOver(true); stage.mouseMoveOutside = true; createjs.Touch.enable(stage); var imgList = ["http://jsrun.it/assets/N/b/D/X/NbDXj.jpg", "http://jsrun.it/assets/f/K/7/y/fK7yE.jpg", "http://jsrun.it/assets/j/U/q/d/jUqdG.jpg", "http://jsrun.it/assets/q/o/4/j/qo4jP.jpg", "http://jsrun.it/assets/i/Q/e/1/iQe1f.jpg", "http://jsrun.it/assets/5/k/y/R/5kyRi.jpg", "http://jsrun.it/assets/x/T/I/h/xTIhA.jpg", "http://jsrun.it/assets/4/X/G/F/4XGFt.jpg", "http://jsrun.it/assets/6/7/n/r/67nrO.jpg", "http://jsrun.it/assets/k/i/r/8/kir8T.jpg", "http://jsrun.it/assets/2/3/F/q/23Fqt.jpg", "http://jsrun.it/assets/c/l/d/5/cld59.jpg", "http://jsrun.it/assets/e/J/O/f/eJOf1.jpg", "http://jsrun.it/assets/o/j/Z/x/ojZx4.jpg", "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", "http://jsrun.it/assets/4/b/g/V/4bgVf.jpg", "http://jsrun.it/assets/4/m/1/8/4m18z.jpg", "http://jsrun.it/assets/4/w/b/F/4wbFX.jpg", "http://jsrun.it/assets/4/k/T/G/4kTGQ.jpg", "http://jsrun.it/assets/s/n/C/r/snCrr.jpg", "http://jsrun.it/assets/7/f/H/u/7fHuI.jpg", "http://jsrun.it/assets/v/S/d/F/vSdFm.jpg", "http://jsrun.it/assets/m/g/c/S/mgcSp.jpg", "http://jsrun.it/assets/t/L/t/P/tLtPF.jpg", "http://jsrun.it/assets/j/7/e/H/j7eHx.jpg", "http://jsrun.it/assets/m/o/8/I/mo8Ij.jpg", "http://jsrun.it/assets/n/P/7/h/nP7ht.jpg", "http://jsrun.it/assets/z/f/K/S/zfKSP.jpg", "http://jsrun.it/assets/2/3/4/U/234U6.jpg", "http://jsrun.it/assets/d/Z/y/m/dZymk.jpg"]; var images = [], loaded = 0, currentFrame = 0, totalFrames = imgList.length; var rotate360Interval, start_x; var bg = new createjs.Shape(); stage.addChild(bg); var bmp = new createjs.Bitmap(); stage.addChild(bmp); var myTxt = new createjs.Text("HTC One", '24px Ubuntu', "#ffffff"); myTxt.x = myTxt.y =20; myTxt.alpha = 0.08; stage.addChild(myTxt); function load360Image() { var img = new Image(); img.src = imgList[loaded]; img.onload = img360Loaded; images[loaded] = img; } function img360Loaded(event) { loaded++; bg.graphics.clear() bg.graphics.beginFill("#222").drawRect(0,0,stage.canvas.width * loaded/totalFrames, stage.canvas.height); bg.graphics.endFill(); if(loaded==totalFrames) start360(); else load360Image(); } function start360() { document.body.style.cursor='none'; // 360 icon var iconImage = new Image(); iconImage.src = "http://jsrun.it/assets/y/n/D/c/ynDcT.png"; iconImage.onload = iconLoaded; // update-draw update360(0); // first rotation rotate360Interval = setInterval(function(){ if(currentFrame===totalFrames-1) { clearInterval(rotate360Interval); addNavigation(); } update360(1); }, 25); } function iconLoaded(event) { var iconBmp = new createjs.Bitmap(); iconBmp.image = event.target; iconBmp.x = 20; iconBmp.y = canvas.height - iconBmp.image.height - 20; stage.addChild(iconBmp); } function update360(dir) { currentFrame+=dir; if(currentFrame<0) currentFrame = totalFrames-1; else if(currentFrame>totalFrames-1) currentFrame = 0; bmp.image = images[currentFrame]; } //------------------------------- function addNavigation() { stage.onMouseOver = mouseOver; stage.onMouseDown = mousePressed; document.body.style.cursor='auto'; } function mouseOver(event) { document.body.style.cursor='pointer'; } function mousePressed(event) { start_x = event.rawX; stage.onMouseMove = mouseMoved; stage.onMouseUp = mouseUp; document.body.style.cursor='w-resize'; } function mouseMoved(event) { var dx = event.rawX - start_x; var abs_dx = Math.abs(dx); if(abs_dx>5) { update360(dx/abs_dx); start_x = event.rawX; } } function mouseUp(event) { stage.onMouseMove = null; stage.onMouseUp = null; document.body.style.cursor='pointer'; } function handleTick() { stage.update(); } document.body.style.cursor='progress'; load360Image(); // TICKER createjs.Ticker.addEventListener("tick", handleTick); createjs.Ticker.setFPS(60); createjs.Ticker.useRAF = true; } // Init window.addEventListener('load', init, false);