My girlfriend made a small image for the site, what figured a fly, and I thought, It can useful to make small gadget. So the fly birth, and come to life.
The code has five main parts, the image, the CSS, the hover procedure, the procedure what moves the fly, and that one what turns off the gadget.
First part – The image.
Here the image what I made, and what contains the phases of the fly’s animation.
On the image there are the 16 phase of the fly animation, all parts are 100 pixel height and 100 width.
The second part – the CSS class definitions.
The div what contains the image must be in absolute position, and must have very high z-index, to always stay on the top. I stored the images under the template directory, so I used the bloginfo(‘template_directory’) to determine the template folder. I made particular class definitions for all animation phases, and set the offset to the appropriate animation phase in all class definition. (If you set the offset to -400, the browser show the fifth phase of the image in the visible area.)
#legy{
position:absolute;
height: 100px;
left: 694px;
top: 297px;
width: 100px;
z-index: 30000;}
.legyU {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll 0 0 transparent;}
.legyUR {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -200px 0 transparent;}
.legyR {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -400px 0 transparent;}
.legyDR {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -600px 0 transparent;}
.legyD {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -800px 0 transparent;}
.legyDL {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -1000px 0 transparent;}
.legyL {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -1200px 0 transparent;}
.legyUL {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -1400px 0 transparent;}
.legynU {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -100px 0 transparent;}
.legynUR {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -300px 0 transparent;}
.legynR {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -500px 0 transparent;}
.legynDR {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -700px 0 transparent;}
.legynD {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -900px 0 transparent;}
.legynDL {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -1100px 0 transparent;}
.legynL {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -1300px 0 transparent;}
.legynUL {background: url(“<?bloginfo(‘template_directory’);?>/images/legyek.png”) no-repeat scroll -1500px 0 transparent;}
Third Part – The layer of the fly in the body of the page.
The layer of the fly have some event handler and 3 attributes. All other parameters come from the CSS definitions.
<div onmouseover=”utd_fly();” onclick=”utd_fkill();” id=”legy” ftox=”694″ ftoy=”297″ fstate=”0″></div>
The onMouseOver event forces the fly to fly.
The onClick event kills the fly.
The div needs an id, and I used some attributes to store the targeted position and the state of the fly. The ftox and ftoy stores the targeted position, where the fly have to move. The value of the fstate will be 1 while the fly moving.
Fourth Parth – Mouse hover handler
function utd_fly()
{var fly=document.getElementById(“legy”)
var fstate=fly.attributes["fstate"].value;
if (parseInt(fstate)==0)
{var ftox=parseInt(fly.offsetLeft+(400-Math.random()*800));
var ftoy=parseInt(fly.offsetTop+(400-Math.random()*800));
if (ftox<200) ftox=ftox+300;
if (ftoy<50) ftoy=ftoy+300;
if (ftox>800) ftox=ftox-400;
if (ftoy>1000) ftoy=ftoy-200;
fly.attributes['ftox'].value=ftox;
fly.attributes['ftoy'].value=ftoy;
fly.attributes["fstate"].value=1;
flytime=setTimeout(‘utd_flymove()’,10)}
}
When this event triggered, the function check the state of the fly, and in case of 0 (zero), we make a new random target position what stored in the attributes of the div. Both the x and y offset between -400 and +400. If the fly too close to the edges of the page, we add some adjustment, to stay in the visible area, but I left some chance to fly out from the screen. Finally we turn the status to 1, what meant, the fly is in moving state, and start a timer to run the function what moves the fly in every 10 milliseconds.
And finally – Learning to fly
function utd_flymove()
{var fly=document.getElementById(“legy”);
var ftox=parseInt(fly.attributes['ftox'].value);
var ftoy=parseInt(fly.attributes['ftoy'].value);
var fx=parseInt(fly.offsetLeft);
var fy=parseInt(fly.offsetTop);
if (ftoy<fy) firanyy=-1; else firanyy=1;
if (ftox<fx) firanyx=-1; else firanyx=1;
if (ftoy==fy) firanyy=0 ;
if (ftox==fx) firanyx=0 ;
if (Math.abs(ftox-fx)>20) firanyx=firanyx*2;
if (Math.abs(ftoy-fy)>20) firanyy=firanyy*2;
if (Math.abs(ftox-fx)>50) firanyx=firanyx*3;
if (Math.abs(ftoy-fy)>50) firanyy=firanyy*3;
if (fx!=ftox | fy!=ftoy)
{fly.style.left=(fx+firanyx)+”px”;
fly.style.top=(fy+firanyy)+”px”;
if (firanyx>0) fimgx=”R”;
if (firanyx<0) fimgx=”L”;
if (firanyy>0) fimgy=”D”;
if (firanyy<0) fimgy=”U”;
if ((Math.abs(firanyy)>Math.abs(firanyx)*2) & (firanyy!=0 & firanyx!=0) ) fimgx=”";
if ((Math.abs(firanyx)>Math.abs(firanyy)*2) & (firanyy!=0 & firanyx!=0) ) fimgy=”";
fimg=fimgy+fimgx;
if (fimg==”") fimg=”U”;
if (fly.className.indexOf(“n”)>0) fly.className=”legy”+fimg; else fly.className=”legyn”+fimg;
flytime=setTimeout(‘utd_flymove()’,10);}
else
{fly.attributes["fstate"].value=0;
fly.className=fly.className.replace(“n”,”");}
}
This function moves the fly to the targeted position. First we calculate the direction of the moving. firanyx and firanyy determines the x and y direction. If the distance of the targeted position is greater then 50 or 20 we multiply the direction value with 6 or 2, so thy fly flies faster while the target still far. If the targeted and the current position still not the same, we move the fly, otherwise turn the state to 0 (zero) and set the image to “closed winged” position.
If the fly need to move, we move the fly to the next position, and turn the image to the appropriate direction with changes the class of the div. Finally we restart the timer to keep the fly in move.
Kill her if disturbs you!
function utd_fkill()
{var fly=document.getElementById(“legy”);
fly.attributes["fstate"].value=0;
fly.style.display=”none”;}
This small function turns off the visibility of the div what contains the fly. You have to use this for the onClick event of the element what contains the fly. The function just turn the state of the fly to 0(zero) then set the visibility of the element to hidden.
I hope you like this small gadget, and enjoy the simplicity of the code, what gives life for her.
