Thursday, 15 August 2013

JQuery - Animate using Canvas in Div tag to Draw a Flag - (JQuery Source)


JQuery Source

<script type="text/javascript">
$(document).ready(
function(){
g();

}

);

function g(){

$('#stick').animate({height:"400px"},5000,function(){



$('#br').slideDown(8000,function(){
$('#sf').animate({width:"210px" },'slow',function(){
$('#sf').animate({height:"40px" },'slow',function(){

$('#bt').animate({width:"216px"},'slow',function(){

$('#gr').animate({width:"210px"},'slow');
$('#wh').animate({width:"210px"},'slow',function(){

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


var cc= document.getElementById('c');
 var context = cc.getContext('2d');
 var x =105;
 var y = 20;
 var radius = 20;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI /2;

 context.lineWidth = 2;
 context.strokeStyle = 'blue';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 2;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0, 0, cc.width, cc.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) , false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }


 }
animate();


$('#c').show(500,function(){

$('#s1').show(2000,function(){

var ss1=cc.getContext("2d");

ss1.beginPath();
ss1.moveTo(105,0);
ss1.lineTo(105,20);
ss1.lineWidth="1.5";
ss1.shadowBlur=1;
ss1.strokeStyle="blue";
ss1.stroke();

$('#s25').show('fast',function(){

var ss1=cc.getContext("2d");

ss1.beginPath();
ss1.moveTo(105,0);
ss1.lineTo(105,20);
ss1.lineWidth="1.5";
ss1.shadowBlur=1;
ss1.strokeStyle="blue";
ss1.stroke();


$('#s2').slideDown('fast',function(){

var ss2=cc.getContext("2d");

ss2.beginPath();
ss2.moveTo(105+5,0+1);
ss2.lineTo(105,20);
ss2.strokeStyle="blue";
ss2.stroke();

$('#s3').slideDown('fast',function(){

var ss3=cc.getContext("2d");

ss3.beginPath();
ss3.moveTo(105+10,0+2);
ss3.lineTo(105,20);
ss3.strokeStyle="blue";
ss3.stroke();

$('#s4').slideDown('fast',function(){

var ss4=cc.getContext("2d");

ss4.beginPath();
ss4.moveTo(105+15,0+5);
ss4.lineTo(105,20);
ss4.strokeStyle="blue";
ss4.stroke();

$('#s5').slideDown('fast',function(){

var ss5=cc.getContext("2d");

ss5.beginPath();
ss5.moveTo(105+18,0+10);
ss5.lineTo(105,20);
ss5.strokeStyle="blue";
ss5.stroke();

$('#s6').slideDown('fast',function(){

var ss6=cc.getContext("2d");

ss6.beginPath();
ss6.moveTo(105+19,0+15);
ss6.lineTo(105,20);
ss6.strokeStyle="blue";
ss6.stroke();


$('#s7').show('fast',function(){

var ss7=cc.getContext("2d");

ss7.beginPath();
ss7.moveTo(105+20,20);
ss7.lineTo(105,20);
ss7.lineWidth="1.5";
ss7.shadowBlur=1;
ss7.strokeStyle="blue";
ss7.stroke();


$('#s8').slideDown('fast',function(){

var ss8=cc.getContext("2d");

ss8.beginPath();
ss8.moveTo(105+19,25);
ss8.lineTo(105,20);
ss8.strokeStyle="blue";
ss8.stroke();

$('#s9').slideDown('fast',function(){

var ss9=cc.getContext("2d");

ss9.beginPath();
ss9.moveTo(105+18,30);
ss9.lineTo(105,20);
ss9.strokeStyle="blue";
ss9.stroke();

$('#s10').slideDown('fast',function(){

var ss10=cc.getContext("2d");

ss10.beginPath();
ss10.moveTo(105+15,30+5);
ss10.lineTo(105,20);
ss10.strokeStyle="blue";
ss10.stroke();

$('#s11').slideDown('fast',function(){

var ss11=cc.getContext("2d");

ss11.beginPath();
ss11.moveTo(105+10,37);
ss11.lineTo(105,20);
ss11.strokeStyle="blue";
ss11.stroke();

$('#s12').slideDown('fast',function(){

var ss12=cc.getContext("2d");

ss12.beginPath();
ss12.moveTo(105+5,39);
ss12.lineTo(105,20);
ss12.strokeStyle="blue";
ss12.stroke();

$('#s13').slideDown('fast',function(){

var ss13=cc.getContext("2d");

ss13.beginPath();
ss13.moveTo(105,40);
ss13.lineTo(105,20);
ss13.strokeStyle="blue";
ss13.stroke();



$('#s14').slideDown('fast',function(){

var ss14=cc.getContext("2d");

ss14.beginPath();
ss14.moveTo(105-5,39);
ss14.lineTo(105,20);
ss14.strokeStyle="blue";
ss14.stroke();

$('#s15').slideDown('fast',function(){

var ss15=cc.getContext("2d");

ss15.beginPath();
ss15.moveTo(105-10,37);
ss15.lineTo(105,20);
ss15.strokeStyle="blue";
ss15.stroke();

$('#s16').slideDown('fast',function(){

var ss16=cc.getContext("2d");

ss16.beginPath();
ss16.moveTo(105-15,30+5);
ss16.lineTo(105,20);
ss16.strokeStyle="blue";
ss16.stroke();

$('#s17').slideDown('fast',function(){

var ss17=cc.getContext("2d");

ss17.beginPath();
ss17.moveTo(105-18,30);
ss17.lineTo(105,20);
ss17.strokeStyle="blue";
ss17.stroke();

$('#s18').slideDown('fast',function(){

var ss18=cc.getContext("2d");

ss18.beginPath();
ss18.moveTo(105-19,25);
ss18.lineTo(105,20);
ss18.strokeStyle="blue";
ss18.stroke();


$('#s19').show('fast',function(){

var ss19=cc.getContext("2d");

ss19.beginPath();
ss19.moveTo(105-20,20);
ss19.lineTo(105,20);
ss19.lineWidth="1.5";
ss19.shadowBlur=1;
ss19.strokeStyle="blue";
ss19.stroke();


$('#s20').slideDown('fast',function(){

var ss20=cc.getContext("2d");

ss20.beginPath();
ss20.moveTo(105-19,0+15);
ss20.lineTo(105,20);
ss20.strokeStyle="blue";
ss20.stroke();

$('#s21').slideDown('fast',function(){

var ss21=cc.getContext("2d");

ss21.beginPath();
ss21.moveTo(105-18,0+10);
ss21.lineTo(105,20);
ss21.strokeStyle="blue";
ss21.stroke();

$('#s22').slideDown('fast',function(){

var ss22=cc.getContext("2d");

ss22.beginPath();
ss22.moveTo(105-15,0+5);
ss22.lineTo(105,20);
ss22.strokeStyle="blue";
ss22.stroke();

$('#s23').slideDown('fast',function(){

var ss23=cc.getContext("2d");

ss23.beginPath();
ss23.moveTo(105-10,0+2);
ss23.lineTo(105,20);
ss23.strokeStyle="blue";
ss23.stroke();

$('#s24').slideDown('fast',function(){

var ss24=cc.getContext("2d");

ss24.beginPath();
ss24.moveTo(105-5,0+1);
ss24.lineTo(105,20);
ss24.strokeStyle="blue";
ss24.stroke();

$('#sfc').animate({width:"210px",height:"40px"},1000,function(){
$('#grc').animate({width:"210px",height:"40px"},1000,function(){


$('#br').animate({marginTop:"-400px"},5000,function(){
$('#name').slideDown(1000);

});

});
});


});
});
});
});

});
});
});
});
});





});
});
});
});
});

});
});
});
});
});

});
});
});
});

});
});



});
});
});

});

});

});
});

}</script>