"I Love U" Animation by Java Script

"I Love U" Animation by Java Script



<html>
<body bgcolor="#000000" onLoad="arrange()">
<SCRIPT LANGUAGE="JavaScript">
//script by mymekailbiswas.com@gmail.com//
<!-- Begin
Imageq= new Array('bublove.gif','bub.gif');
Amount = 30;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ydisten=0
xdisten=0
function arrange(){
var t=window.document.body.clientHeight;
var tt=window.document.body.clientWidth;
ydisten=tt-250
xdisten=t-20
intro_pict_img_cc.style.top=160
intro_pict_img_cc.style.left=tt/2
love_outer.style.left=(tt-460)/2+10
love_outer.style.top=200
start_l=230
start_t=-10
creat_o();
}

for (i = 0; i < Amount; i++) {
Ypos[i]=0
Xpos[i]=0
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
rate[i] = Math.random()*0.5+0.1;
}

// This script by mekailbiswas
Imageq= new Array('http://1.bp.blogspot.com/_MQ06HQhYDVM/
TPKwQFIKrkI/AAAAAAAAACw/2vpr1FPym5o/s1600/love34.gif',
'http://1.bp.blogspot.com/_MQ06HQhYDVM/TPKwQFIKrkI/
AAAAAAAAACw/2vpr1FPym5o/s1600/love34.gif');
colours=new Array('ff0000','00ff00','3366ff','ff00ff',
'ffa500','ffffff')
am=30
hh=210
var as=0
step = 0.03;
currStep = 0;
logoWidth = 50;
logoHeight = hh;
TrigSplit =360/ am;
var ll=40;
var ll2=0;
var as=0

document.write('<div id="intro_pict_img_cc" style="position:absolute;top:600;
left:300;BACKGROUND: #ffffff">');
document.write('<img id="intro_pict_img" src=hh.png style="position:absolute;
height:100;width:99;top:-110px;left:-40px;filter:alpha(opacity=0)">');

for(i=0;i<am;i++)
{
mmk=Imageq[Math.floor(Math.random()*Imageq.length)];
document.write('<img id="vv2" src='+mmk+' style="position:absolute;
height:20;width:20;top:0px;left:0px">');
}
document.write('<div id="intro_pict_img_cc2" style="position:absolute;width:460;
height:200;top:-150;left:-220;BACKGROUND:#000000;filter:alpha(opacity=100)"></div>');

document.write('</div>');


function aa(){


for (i = 0; i < am; i++) {
var C=colours[Math.round(Math.random()*colours.length)]
vv2[i].style.filter="glow(color="+C+", strength=3)"
var tamp=-150 * Math.sin(currStep + i * 360/am  * Math.PI /180);
if(tamp>0){
vv2[i].style.top=150 * Math.sin(currStep + i
* 360/am  * Math.PI / 180);}else{
vv2[i].style.top=0;}
vv2[i].style.left =hh * Math.cos(currStep + i * 360/am  * Math.PI / 180);
}
currStep -= step;
setTimeout('aa()',35);
}


list_image=new Array('http://lh4.ggpht.com/_MQ06HQhYDVM/
TPK05z8yq-I/AAAAAAAAADA/oLsCGqQi20o/s128/hh3.png',
'http://lh6.ggpht.com/_MQ06HQhYDVM/TPK056vEnrI/
AAAAAAAAADE/KgCte0US_MY/s128/hh4.png',
'http://lh5.ggpht.com/_MQ06HQhYDVM/TPK06Jeq7FI/
AAAAAAAAADI/ywf1SY5P5aM/s128/hh.png')
var image_cont=0;
var fad_img_val=0

function IE(){
if(fad_img_val<100){
intro_pict_img.filters[0].opacity=fad_img_val;
fad_img_val++;
setTimeout("IE()",3);
}else{IEE();}

}

function IEE(){
if(fad_img_val>-10){
intro_pict_img.filters[0].opacity=fad_img_val;
fad_img_val=fad_img_val-1;
setTimeout("IEE()",3);
}else{
image_cont++;
if(image_cont<list_image.length){
intro_pict_img.src=list_image[image_cont];}else{image_cont=-1;}
IE();}

}

//-->



<!--
// This script by mekailbiswas
top_p=new Array('10','10','10','10','10','30','50','70','90','110','130','130',
'130','130','130','130','38','22','22','12','12','8','8','12','13','28','28','46',
'46','64','64','81','81','97','97','110','110','125','125','135','135','10','10','10',
'10','10','10','30','50','70','90','110','125','130','30','50','70','90','110','125',
'130','160','160','160','160','160','160','160','160','160','160','160','160','160',
'160','160','160','160','160','160','160','160','160');
left_p=new Array('10','30','50','70','90','50','50','50','50','50','50','10','30',
'50','70','90','200','190','210','226','174','244','156','263','137','127','272',
'125','273','130','270','138','262','148','252','162','238','174','226','190','210',
'310','330','350','390','410','430','330','330','330','330','330','340','360','410',
'410','410','410','410','400','380','10','30','50','70','90','110','130','150','170',
'190','210','230','250','270','290','310','330','350','370','390','410','430');

vbv=0

start_left=200
start_top=38
target_left=400;
target_top=500;
move_step=5;
rot_left=new Array()
rot_top=new Array()
rot_left_stop=0
rot_top_stop=0
rot_left_count=0
rot_top_count=0

document.write('<div id="love_outer" style="position:absolute;top:100;left:100;
 width:463; height:189;filter:alpha(opacity=100)">');
for(k=0;k<left_p.length;k++){
document.write('<img id="love_img" src='+mmk+' style="position:absolute;height:20;
width:20;top:-120px;left:-120"/>');
}
document.write('</div>');


function creat_road(){
left_temp=start_left;
top_temp=start_top;

left_disten=(target_left-start_left)
if(left_disten<0){left_disten=left_disten/-1}
top_disten=(target_top-start_top)
if(top_disten<0){top_disten=top_disten/-1}



for(i=0;i<left_disten/move_step;i++){
if(start_left<target_left){
left_temp=left_temp+move_step;}
else{
left_temp=left_temp-move_step;
}
rot_left[i]=left_temp
rot_left_stop=i;
}

for(i=0;i<top_disten/move_step;i++){
if(start_top<target_top){
top_temp=top_temp+move_step;}
else{
top_temp=top_temp-move_step;
}
rot_top[i]=top_temp;
rot_top_stop=i;
}
if(start_left+move_step==target_left){rot_left[0]=target_left;rot_left_stop=1;}
if(start_top+move_step==target_top){rot_top[0]=target_top;rot_top_stop=1;}
move_onrod();
}

function creat_o(){
if(vbv<top_p.length){
target_left=left_p[vbv]
target_top=top_p[vbv]
creat_road();
}else{setTimeout('IE()', 2000);fad_img();setTimeout('aa()', 500)}
}

function move_onrod(){
if(rot_left_count<rot_left_stop){love_img[vbv].style.left=rot_left[rot_left_count];rot_left_count++;}
if(rot_top_count<rot_top_stop){love_img[vbv].style.top=rot_top[rot_top_count];rot_top_count++;}
if(rot_left_count<rot_left_stop || rot_top_count<rot_top_stop){
setTimeout("move_onrod()",10);}
else{
love_img[vbv].style.left=target_left;
love_img[vbv].style.top=target_top;
rot_left_count=0;rot_top_count=0;vbv++
setTimeout("creat_o()",30);}

}
var fad_img_val2=100
function fad_img(){
if(fad_img_val2>-10){
document.getElementById("intro_pict_img_cc2").filters[0].opacity=fad_img_val2;

fad_img_val2=fad_img_val2-1
setTimeout("fad_img()",105);
}
}
</script>

</body>
</html>



Click To Viev Demo