PDA

View Full Version : Flying Bats/Flying Cupids Script



KennyP
04-20-2012, 07:32 AM
Hi guys:

In the Flying Bats/Flying Cupids script (http://www.dynamicdrive.com/dynamicindex4/bats.htm), 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.


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

Thanks,

Kenny

vwphillips
04-20-2012, 03:19 PM
<!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?


setTimeout( function(){

// the script here

}, 5000); // delay 5000 ms

vwphillips
05-16-2014, 03:48 PM
<!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


<!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 (http://www.reneesrosegarden.com/welcome-halloween.php) I prepared for a website.

Thank you very, very much for your help.

Kenny