title: JQuery Shuffle Effect using Html5 [Canvas +CSS +JS]
body: <p>I saw a JQuery Shuffle <a href="http://hungred.com/wp-content/demo/jQuery-Shuffle-effect/demo.html" rel="nofollow noreferrer">Example</a>  and<br>
  I was trying to implement the same using HTML5 and Canvas + CSS + JS with images.</p>
  
  <p>but finding animation/drawing using Canvas bit difficult.</p>
  
  <p>I just had idea of creating as many canvas as images and then try to move the canvas
  for shuffle animation.</p>
  
  <p>Are there any libraries to achieve the same.</p>
  
  <p>Anyone can help me with the same.   </p>
  
  <p><strong>Edit:<br>
  Here is how i got the effect using Jquery  ..(few bugs thr)
  i have achieved the effect using Jquery and some 
  libraries..but it is basically thr manipulating CSS values...<br>
  i was trying to do something with just canvas based drawing apis.</strong>  </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  canvas
  { 
   position: absolute; 
   top: 0px;
   left: 0px; 
   width: 800px;
   height:600px;
  }
  .easing_example {
  border:1px solid #777777;
  padding:0.5em;
  position:relative;
  width:4em;
  }
   img {display:none;}
  .landscape #ps_container{ width: 1000px; height: 600px; }
  
  #ecard-wrapper{ margin: 20px auto; width: 980px; }
  #ps_container{ border: 1px solid #c2c2c2;  margin: 25px 20px 0 0; overflow: hidden; position: relative; float: left; }
  
  
  &lt;/style&gt;
  
      &lt;script src="js/jquery-1.4.2.js" type="text/javascript"&gt;
      &lt;/script&gt;
  
      &lt;script src="js/jquery.easing.1.3.js" type="text/javascript"&gt;
      &lt;/script&gt;
  
      &lt;script src="js/jquery-css-transform.js" type="text/javascript"&gt;
      &lt;/script&gt;
      &lt;script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript"&gt;
      &lt;/script&gt;
  
  
  
  
  
      &lt;script type="text/javascript"&gt;
      var viewport = { obj: null, width: 0, height: 0 };
      var timerId=null;
      var timeInterval=10;
      var factor=5;
      var topZIndex=0;
  
  
      var currentCanvasCount=0;
  
      function  CVImage()
      {
           this.ImageSource = null;//string
           this.size ={ x: 0, y: 0 };
           this.position = {x: 0, y: 0};
           this.Rotate = 0;
           this.Canvas = null;
           this.Context = null;
           this.Image =null;
      }
  
  
      CVImage.prototype.draw = function()
      {
          var img = new Image();               
          img.src = this.ImageSource;
          this.Image=img;
          var context = this.Context;
          context.drawImage(img,this.position.x - this.size.x /2,this.position.y - this.size.y /2, 
          this.size.x, this.size.y);                
      }
  
      CVImage.prototype.update =function(){
          var context = this.Context;
          context.save();
          context.clearRect(0,0, this.Canvas.width, this.Canvas.height);
          context.translate(this.size.x/2,this.size.y/2);
          context.rotate(this.Rotate * Math.PI/180);
          this.draw();
          context.restore();
      }
  
      CVImage.prototype.slideOut =function(){
          var context = this.Context;
          var canvas = this.Canvas;
          $(canvas)
                  .animate(
                              {left: 10,top: -20}, 
                      {
                              duration: 700,
                              easing: 'easeOutBack'
                      })
                  .animate(
                              {rotate: '20deg',top:-250,left:375},
                      {
                              duration: 1000,
                              easing: 'easeOutBack',
                              complete : function(){topZIndex--;$(this).css("z-index", topZIndex);}
  
                      })
                  .animate(
                              {top:0,left: 0,rotate: '0deg'}, 
                      {
                              duration: 1000,
                              easing: 'easeOutBack',
                              complete:continueAnimation 
                      });
  
      }
  
  
       function continueAnimation()
          {       
            if( currentCanvasCount &gt;0)
            {
              var canvasObj = CanvasArr[currentCanvasCount-1];
              if(canvasObj!=null)
              {
               canvasObj.slideOut();
               currentCanvasCount--;
              }
            }
            else if(currentCanvasCount == 0)
            {
             startShuffle();
            }
  
          }   
  
          $(document).ready(function() {
          init();     
  
                  $("#start_flip").click( function(){ 
                            startShuffle();
  
                  });     
          });
  
  
          var CanvasArr = new Array();        
          function startShuffle(){
               var i =0;
               currentCanvasCount=CanvasArr.length;
               continueAnimation();
          }
  
  
          function init() 
          {
  
              var i = 0;          
              viewport.obj = $('#ps_container');
              viewport.width = viewport.obj[0].clientWidth;
              viewport.height = viewport.obj[0].clientHeight;
  
              var images = $(".images_collection img");
              for (i = 0; i &lt; images.length ; i++)  
              {
                  var cid = "canvas_" + ""+i;
                  var canvas = document.getElementById(cid);
                  canvas.width = viewport.width;
                  canvas.height = viewport.height;
                  var ctx = canvas.getContext('2d');
                  var cvimg = new CVImage();
                  cvimg.ImageSource = images[i].src;
                  cvimg.size.x = parseInt(images[i].width);
                  cvimg.size.y = parseInt(images[i].height);
                  cvimg.position.x = 350;
                  cvimg.position.y = 250;
                  cvimg.Canvas = canvas;          
                  cvimg.Context = ctx;        
                  CanvasArr.push(cvimg);
              }
              DrawCanvas();           
              //timerId = setInterval(DrawCanvas,timeInterval);
          }
  
          function DrawCanvas()
          {
          var i =0;
          var canv =null;
          for(i=0;i&lt;CanvasArr.length;i++)
            {
              canv = CanvasArr[i];
              canv.update();
            }
          }       
  
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
        &lt;a href="#" id="start_flip"&gt;START SHUFFLE&lt;/a&gt;
  
        &lt;a href="#" id="stop_flip"&gt;STOPP SHUFFLE&lt;/a&gt;
  
        &lt;div class="easing_example" id="easing_example_3" style="left: 0px;"&gt;Click Me&lt;/div&gt;
  
       &lt;div id="images_collection" class="images_collection" style="display: none"&gt;
          &lt;a href="#"&gt;
              &lt;img src="images/Chichen Itza.jpg" alt="" /&gt;&lt;/a&gt; &lt;a href="#"&gt;
                  &lt;img src="images/Great Wall of China.jpg" alt="" /&gt;&lt;/a&gt; &lt;a href="#"&gt;
                      &lt;img src="images/Machu Picchu.jpg" alt="" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="ecard-wrapper" class="landscape"&gt;
      &lt;div id="ps_container" style="display: block; position: fixed; top: 150px; left: 80px"&gt;
          &lt;canvas id="canvas_0" height="800" width="600" &gt;&lt;/canvas&gt;
          &lt;canvas id="canvas_1" height="800" width="600" &gt;&lt;/canvas&gt;
          &lt;canvas id="canvas_2" height="800" width="600" &gt;&lt;/canvas&gt;
          &lt;canvas id="canvas_3" height="800" width="600" &gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks All.</p>