PDA

View Full Version : Falling image script, help please

mplutodh1
05-16-2003, 01:01 AM
I also need help with this script, I want 9 snow flakes to fall from the top of the screen in a vertical line down towards the bottom of the screen. They dont need to repeat or anything just fall, preferablly at at least 3 different speeds. The images I am using are attached. Here is what I have so far, but I dont think I am doing this correctly.

Oh and yes I know there are scripts out there that do this for me in a more advanced way.. moving the flakes so they look realistic, all I want is for these to drop straight down...

THANK YOU!

<HTML>
<HEAD>
<TITLE>Blizzard</TITLE>


<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS

flake = new Array(9); // flake images
flake[0] = "snowflake1.gif";
flake[1] = "snowflake2.gif";
flake[2] = "snowflake3.gif";
flake[3] = "snowflake1.gif";
flake[4] = "snowflake2.gif";
flake[5] = "snowflake3.gif";
flake[6] = "snowflake1.gif";
flake[7] = "snowflake2.gif";
flake[8] = "snowflake3.gif";

var flakePosition = 0;
var fillPosition = 0;
vertical = new Array(80);
for(var i = 0; i < 80; ++i) {
vertical[i] = fillPosition;
fillPosition += 5;
}

function flakeFall() {
document.all.flake.style.top = vertical[flakePosition];
++flakePosition;
if (flakePosition == 79)
flakePosition = 0;
}

function startSnowing() {
setInterval("flakeFall()",1000);
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>
</HEAD>


<BODY onLoad="startSnowing();">
<SPAN ID="flake0" STYLE="position:absolute; left:10; top:0">
<IMG SRC="snowflake1.gif">
</SPAN>
<SPAN ID="flake1" STYLE="position:absolute; left:90; top:0">
<IMG SRC="snowflake2.gif">
</SPAN>
<SPAN ID="flake2" STYLE="position:absolute; left:170; top:0">
<IMG SRC="snowflake3.gif">
</SPAN>
<SPAN ID="flake3" STYLE="position:absolute; left:260; top:0">
<IMG SRC="snowflake1.gif">
</SPAN>
<SPAN ID="flake4" STYLE="position:absolute; left:320; top:0">
<IMG SRC="snowflake2.gif">
</SPAN>
<SPAN ID="flake5" STYLE="position:absolute; left:410; top:0">
<IMG SRC="snowflake3.gif">
</SPAN>
<SPAN ID="flake6" STYLE="position:absolute; left:500; top:0">
<IMG SRC="snowflake1.gif">
</SPAN>
<SPAN ID="flake7" STYLE="position:absolute; left:580; top:0">
<IMG SRC="snowflake2.gif">
</SPAN>
<SPAN ID="flake8" STYLE="position:absolute; left:700; top:0">
<IMG SRC="snowflake3.gif">
</SPAN>

</BODY>
</HTML>
mplutodh1
05-16-2003, 01:01 AM
snowflake2.gif
mplutodh1
05-16-2003, 01:02 AM
snowflake3.gif
Mr J
05-16-2003, 06:07 PM
<HTML>
<HEAD>
<TITLE>Blizzard</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
myflake = new Array(9); // flake images
myflake[0] = "snowflake1.gif";
myflake[1] = "snowflake2.gif";
myflake[2] = "snowflake3.gif";
myflake[3] = "snowflake1.gif";
myflake[4] = "snowflake2.gif";
myflake[5] = "snowflake3.gif";
myflake[6] = "snowflake1.gif";
myflake[7] = "snowflake2.gif";
myflake[8] = "snowflake3.gif";

a=0
function init(){
W=document.body.clientWidth
H=document.body.clientHeight
flakeFall()
}

function flakeFall() {
timer=setTimeout("flakeFall()",100)
for(var i = 0; i < myflake.length; ++i) {
speed=Math.random()*20
document.getElementById("flake"+i).style.pixelTop +=speed;

if(document.getElementById("flake"+i).style.pixelTop>H-70){
document.getElementById("flake"+i).style.pixelTop=0
}
}
}

// -->
</SCRIPT>
</HEAD>


<BODY onLoad="init()">
<SPAN ID="flake0" STYLE="position:absolute; left:10; top:0">
<IMG SRC="snowflake1.gif">
</SPAN>
<SPAN ID="flake1" STYLE="position:absolute; left:90; top:0">
<IMG SRC="snowflake2.gif">
</SPAN>
<SPAN ID="flake2" STYLE="position:absolute; left:170; top:0">
<IMG SRC="snowflake3.gif">
</SPAN>
<SPAN ID="flake3" STYLE="position:absolute; left:260; top:0">
<IMG SRC="snowflake1.gif">
</SPAN>
<SPAN ID="flake4" STYLE="position:absolute; left:320; top:0">
<IMG SRC="snowflake2.gif">
</SPAN>
<SPAN ID="flake5" STYLE="position:absolute; left:410; top:0">
<IMG SRC="snowflake3.gif">
</SPAN>
<SPAN ID="flake6" STYLE="position:absolute; left:500; top:0">
<IMG SRC="snowflake1.gif">
</SPAN>
<SPAN ID="flake7" STYLE="position:absolute; left:580; top:0">
<IMG SRC="snowflake2.gif">
</SPAN>
<SPAN ID="flake8" STYLE="position:absolute; left:700; top:0">
<IMG SRC="snowflake3.gif">
</SPAN>

</BODY>
</HTML>
mplutodh1
05-16-2003, 07:01 PM
Sweet thanks