Flying Bats/Flying Cupids Script

**KennyP** · 04-20-2012, 07:32 AM

Hi guys:

In the Flying Bats/Flying Cupids script, would you please show me how to add an array of different images in the code below? For example, bat1gif., bat2.gif, bat3.gif, etc.

Code:

Cupid=new Image();
Cupid.src="bat.gif";  //specify path to bat image

Thanks,

Kenny

**vwphillips** · 04-20-2012, 03:19 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

<script type="text/javascript">
<!--

/*
Flying Bats- By Dynamic Drive, based on script by Kurt (kurt.grigg@virgin.net)
For full source, usage terms, and 100's more DHTML scripts
Visit http://www.dynamicdrive.com
*/

var ImageArray=["http://www.vicsjavascripts.org.uk/StdImages/One.gif","http://www.vicsjavascripts.org.uk/StdImages/Two.gif","http://www.vicsjavascripts.org.uk/StdImages/Three.gif","http://www.vicsjavascripts.org.uk/StdImages/Four.gif"];
var Xpos=700;  //cupids x coordinates, in pixel
var Ypos=200;  //cupids y coordinates, in pixel
var step=0.3;  //Animation speed (smaller is slower)
var dismissafter=15;  //seconds after which Cupids should disappear, in seconds

document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');
for (var i=0; i < ImageArray.length; i++){
 document.write('<a href="http://www.dynamicdrive.com"><img src="'+ImageArray[i]+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')
}
document.write('</div></div>');

var currStep=0;

function dismisscupid(){
 clearInterval(flycupid)
 document.getElementById("out").style.visibility="hidden"
}


function WWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function Animate(){
 currStep+=step;
 var wwhs=WWHS(),yBase = wwhs[1]/3,xBase = wwhs[0]/6;
 for (var i=0; i <ImageArray.length; i++){
  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)+wwhs[3]+'px';
  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)+wwhs[2]+'px';
 }

}

flycupid=setInterval('Animate()',30);
setTimeout("dismisscupid()",dismissafter*1000)

//-->
</script>
</body>

</html>

**KennyP** · 04-20-2012, 06:18 PM

vwphillips:

Thank you so much for your reply and the code addition. It works just great with any number of images.

Kenny

**KennyP** · 05-16-2014, 02:22 PM

Hi vwphillips:

Thanks again.
After a couple of years using this script with your addition, I'm now trying to add a 5 second delay before the stupid/bats begin to display. I tried using the following but I can't get it to work. Would you please show me how it can be made to work?

Code:

setTimeout( function(){

  // the script here

}, 5000); // delay 5000 ms

**vwphillips** · 05-16-2014, 03:48 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

<script type="text/javascript">
<!--

/*
Flying Bats- By Dynamic Drive, based on script by Kurt (kurt.grigg@virgin.net)
For full source, usage terms, and 100's more DHTML scripts
Visit http://www.dynamicdrive.com
*/

var ImageArray=["http://www.vicsjavascripts.org/StdImages/One.gif","http://www.vicsjavascripts.org/StdImages/Two.gif","http://www.vicsjavascripts.org/StdImages/Three.gif","http://www.vicsjavascripts.org/StdImages/Four.gif"];
var Xpos=700;  //cupids x coordinates, in pixel
var Ypos=200;  //cupids y coordinates, in pixel
var step=0.3;  //Animation speed (smaller is slower)
var dismissafter=15;  //seconds after which Cupids should disappear, in seconds

document.write('<div id="out" style="position:absolute;top:0px;left:0px"><div id="in" style="position:relative">');
for (var i=0; i < ImageArray.length; i++){
 document.write('<a href="http://www.dynamicdrive.com"><img src="'+ImageArray[i]+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-5000px;left:0px" border=0></a>')
}
document.write('</div></div>');

var currStep=0;

function dismisscupid(){
 clearInterval(flycupid)
 document.getElementById("out").style.visibility="hidden"
}


function WWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function Animate(){
 currStep+=step;
 var wwhs=WWHS(),yBase = wwhs[1]/3,xBase = wwhs[0]/6;
 for (var i=0; i <ImageArray.length; i++){
  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)+wwhs[3]+'px';
  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)+wwhs[2]+'px';
 }

}

setTimeout(function(){
 flycupid=setInterval('Animate()',30);
 setTimeout("dismisscupid()",dismissafter*1000);
 },2000)

//-->
</script>
</body>

</html>

**KennyP** · 05-17-2014, 12:17 AM

Thank you once again vwphillips. The delay works very well. However, during the delay time the cupids/bats are seen bunched up together on the left upper side of the screen. Then they animate normally.
If they could be hidden before the animation, then this would work perfectly.

**vwphillips** · 05-17-2014, 04:37 AM

the change i made in red prevents the bats being in view until they fly

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

<script type="text/javascript">
<!--

/*
Flying Bats- By Dynamic Drive, based on script by Kurt (kurt.grigg@virgin.net)
For full source, usage terms, and 100's more DHTML scripts
Visit http://www.dynamicdrive.com
*/

var ImageArray=["http://www.vicsjavascripts.org/StdImages/One.gif","http://www.vicsjavascripts.org/StdImages/Two.gif","http://www.vicsjavascripts.org/StdImages/Three.gif","http://www.vicsjavascripts.org/StdImages/Four.gif"];
var Xpos=700;  //cupids x coordinates, in pixel
var Ypos=200;  //cupids y coordinates, in pixel
var step=0.3;  //Animation speed (smaller is slower)
var dismissafter=15;  //seconds after which Cupids should disappear, in seconds

document.write('<div id="out" style="position:absolute;top:0px;left:0px"><div id="in" style="position:relative">');
for (var i=0; i < ImageArray.length; i++){
 document.write('<a href="http://www.dynamicdrive.com"><img src="'+ImageArray[i]+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-5000px;left:0px" border=0></a>')
}
document.write('</div></div>');

var currStep=0;

function dismisscupid(){
 clearInterval(flycupid)
 document.getElementById("out").style.visibility="hidden"
}


function WWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function Animate(){
 currStep+=step;
 var wwhs=WWHS(),yBase = wwhs[1]/3,xBase = wwhs[0]/6;
 for (var i=0; i <ImageArray.length; i++){
  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)+wwhs[3]+'px';
  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)+wwhs[2]+'px';
 }

}

setTimeout(function(){
 flycupid=setInterval('Animate()',30);
 setTimeout("dismisscupid()",dismissafter*1000);
 },2000)

//-->
</script>
</body>

</html>

**KennyP** · 05-17-2014, 07:10 PM

My apologies, I failed to see "top:-5000px;left:0px" in your previous post which you now highlighted in red.

The timing works great now as you can see in this Halloween splash page I prepared for a website.

Thank you very, very much for your help.

Kenny

Thread: Flying Bats/Flying Cupids Script

Thread Tools

Search Thread

Flying Bats/Flying Cupids Script

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions