Daha önceleri bunun bir benzeri olan Threesixty-slider  diye bir jQuery eklentisi  paylaşmıştık. Şimdiki  demo da aynı özellikte. Html5  ve  Canvas kullanılarak hazırlanmış olan bu örnek  toplamda otuz  adet resimden oluşuyor ve  sayfa  yüklenme  işlemi bittikten sonra  360 derece  olarak ekrandaki htc  telefonu  dönüyor. Mousenizi  sol tıklayıp sürüklediğiniz zaman yine  aynı şekilde  360 derece  cep telefonu görüntülenebiliyor.

Htc  sitesinin anasayfasında şu anda bu demonun aynısı  bulunuyor.Zaten kullansa  kullansa bu tür siteler  kullanır  diye  düşünüyorum.  Aslında içimden kendi resmimi çekip eklemek  geliyor  ama  milim milim tutturmak  o kadar  kolay değil photoshop  kullanarak aynı hizaya getirmek istesem baya zamanımı alacak gibi görünüyor.  Sonuç  olarak emeğe  değer  diye  düşünüyorum. Kişisel sitelerinizde  bu tür  örnekler  hazırlayıp ziyaretçilerinize güzel bir  görüntü sunabilirsiniz bence.

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Easel.js ve Css dosya adresleri : 

 JavaScript : 

< script >
  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 = ["img/1.jpg",
    "img/2.jpg",
    "img/3.jpg",
    "img/4.jpg",
    "img/5.jpg",
    "img/6.jpg",
    "img/7.jpg",
    "img/8.jpg",
    "img/9.jpg",
    "img/10.jpg",
    "img/11.jpg",
    "img/12.jpg",
    "img/13.jpg",
    "img/14.jpg",
    "img/15.jpg",
    "img/16.jpg",
    "img/17.jpg",
    "img/18.jpg",
    "img/19.jpg",
    "img/20.jpg",
    "img/21.jpg",
    "img/22.jpg",
    "img/23.jpg",
    "img/24.jpg",
    "img/25.jpg",
    "img/26.jpg",
    "img/27.jpg",
    "img/28.jpg",
    "img/29.jpg",
    "img/30.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 = "https://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);

 Body etiketleri arasına eklemeniz gereken bölüm.

Html :