<script type="text/javascript" src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<canvas id='canvas' width="465" height="465"></canvas>
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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.