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 (http://www.guyarseneau.com/welcome-halloween.php) . 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:
/*
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>
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 (http://www.guyarseneau.com/welcome-halloween.php) . 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:
/*
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>