A responsive version of the Flying Cupids Script

**KennyP** · 09-17-2014, 07:02 AM

1) Flying Cupids

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cupid.htm

3) Describe problem:

Actually, this script works just fine and I use it for multiple splash pages. For example, here as a Halloween welcome page . However, It is not responsive to small device screens. Notice the ghosts go out of view if you resize the page.
I would love to see it updated so that the x and y coordinates, as well as the size of the "cupids," could be set as percentages, so that they would resize according to screen sizes, as well as maintain the position they are set to display at.

Thanks,

Kenny

The Script With Minor Revisions:

Code:

/*
Flying Cupids- 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
*/

<script type="text/javascript">

var ImageArray=["/images/holidays/halloween/ghost0.png","/images/holidays/halloween/ghost1.png","/images/holidays/halloween/ghost2.png","/images/holidays/halloween/ghost3.png","/images/holidays/halloween/ghost4.png","/images/holidays/halloween/ghost5.png","/images/holidays/halloween/ghost6.png","/images/holidays/halloween/ghost7.png"];
var Xpos=775;  //ghosts x coordinates, in pixel
var Ypos=275;  //ghosts y coordinates, in pixel
var step=0.1;  //Animation speed (smaller is slower)
var dismissafter=10800;  //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.guyarseneau.com"><img src="'+ImageArray[i]+'" id="ns6Bats'+i+'" width=400 height=450 style="position:absolute;top:-5000px;left:0px;z-index:-1;" 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);
 },1500) // delay before ghosts appear in milliseconds

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

**vwphillips** · 09-18-2014, 03:22 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>
/*
Flying Cupids- 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
*/

<script type="text/javascript">

var ImageArray=["/images/holidays/halloween/ghost0.png","/images/holidays/halloween/ghost1.png","/images/holidays/halloween/ghost2.png","/images/holidays/halloween/ghost3.png","/images/holidays/halloween/ghost4.png","/images/holidays/halloween/ghost5.png","/images/holidays/halloween/ghost6.png","/images/holidays/halloween/ghost7.png"];
var step=0.1;  //Animation speed (smaller is slower)
var dismissafter=10800;  //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.guyarseneau.com"><img src="'+ImageArray[i]+'" id="ns6Bats'+i+'" width=100 height=150 style="position:absolute;top:-5000px;left:0px;z-index:-1;" 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(),Ypos = wwhs[1]/2,yBase = wwhs[1]/3,Xpos = wwhs[0]/2,xBase = wwhs[0]/6;
 for (var img,i=0; i <ImageArray.length; i++){
  img=document.getElementById("ns6Bats"+i)
  img.style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)+wwhs[3]-img.height/2+'px';
  img.style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)+wwhs[2]-img.width/2+'px';

 }

}

setTimeout(function(){
 flycupid=setInterval('Animate()',30);
 setTimeout("dismisscupid()",dismissafter*1000);
 },1500) // delay before ghosts appear in milliseconds

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

</html>

Thread: A responsive version of the Flying Cupids Script

Thread Tools

Search Thread

A responsive version of the Flying Cupids Script

Similar Threads

Flying Bats/Flying Cupids Script

Flying Butterfly script

Flying images aren't flying

Flying Planes script

Flying Butterfly script

Bookmarks

Bookmarks

Posting Permissions