Menu
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.
475
If you're going to be making a canvas for each image, then it would not be different from the CSS approach, making it redundant. But if you're going to draw it on a very big canvas, and if you understand about z-index and animation, this is not all too hard to achieve. Read up this primer on canvas animation.
The steps would be:
new Image object and setting its src.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
