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>