Hi All,
I saw a JQuery Shuffle Example and
I was trying to implement the same using HTML5 and Canvas + CSS + JS with images.
but finding animation/drawing using Canvas bit difficult.
I just had idea of creating as many canvas as images and then try to move the canvas for shuffle animation.
Are there any libraries to achieve the same.
Anyone can help me with the same.
Edit:
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...
i was trying to do something with just canvas based drawing apis.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
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; }
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript">
</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="js/jquery-css-transform.js" type="text/javascript">
</script>
<script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript">
</script>
<script type="text/javascript">
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 >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 < 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<CanvasArr.length;i++)
{
canv = CanvasArr[i];
canv.update();
}
}
</script>
</head>
<body>
<a href="#" id="start_flip">START SHUFFLE</a>
<a href="#" id="stop_flip">STOPP SHUFFLE</a>
<div class="easing_example" id="easing_example_3" style="left: 0px;">Click Me</div>
<div id="images_collection" class="images_collection" style="display: none">
<a href="#">
<img src="images/Chichen Itza.jpg" alt="" /></a> <a href="#">
<img src="images/Great Wall of China.jpg" alt="" /></a> <a href="#">
<img src="images/Machu Picchu.jpg" alt="" /></a>
</div>
<div id="ecard-wrapper" class="landscape">
<div id="ps_container" style="display: block; position: fixed; top: 150px; left: 80px">
<canvas id="canvas_0" height="800" width="600" ></canvas>
<canvas id="canvas_1" height="800" width="600" ></canvas>
<canvas id="canvas_2" height="800" width="600" ></canvas>
<canvas id="canvas_3" height="800" width="600" ></canvas>
</div>
</div>
</body>
</html>
Thanks All.