Script Categories













Background Effects >>> Astronaut

Watch as the astronaut floats around in space. His random movements over the background of moving stars gives the perception of space travel.

Step 1: Add the below code to the <body> section of your page:

<SCRIPT LANGUAGE="JavaScript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
document.bgColor='black';
astropic = "astronaut.png"; // location of YOUR astronaut image
var xval = new Array(); // holds star coordinates
var yval = new Array();
no = 100;  // number of stars in the background
speed = 200; // speed
xp = 20 + 100 * Math.random();
yp = 20 + 100 * Math.random();
angle = 3.14 * Math.random(); // astronaut angle
xinc = 3 * Math.sin(angle);
yinc = 3;
var ns = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4));
ie=!ns;
if (ie) {
Wwidth = document.body.clientWidth;
Hheight = document.body.clientHeight;
}
if (ns) {
Wwidth = self.innerWidth;
Hheight = self.innerHeight;
}
    for (var i = 0; i <= no; i++) {
    document.write("<div id=\"div" + i+ "\" style=\"color:white;");
    document.write("position:absolute;left:100;\">.</div>");
    }
    document.write("<div id=\"diva\" style=\"position:absolute;\">");
    document.write("<img src=" + astropic + " border=\"0\" width=\"65\" height=\"95\"></div>");
    for (i = 0; i <= no; i++) {
    xval[i] = Wwidth * Math.random();
    yval[i] = Hheight * Math.random();
    document.getElementById("div" + i).style.left = xval[i];
    document.getElementById("div" + i).style.top = yval[i];
   }
function star() {
for (i = 0; i <= no; i = i+4) {
xval[i] +=5;
if ((i%20) == 0) xval[i] += 10;
if(xval[i] >= Wwidth)  xval[i] = Wwidth * Math.random();
document.getElementById("div" + i).style.left = xval[i];
}
return true;
}
function goangle() {
angle = 3.14 * Math.random();
xinc = 3 * Math.sin(angle);
return true;
}
function space() {
document.getElementById("diva").style.left = xp;
document.getElementById("diva").style.top = yp;

xp += xinc;
yp +=yinc;
star();
if ((xp >= (Wwidth - 50)) || (xp <= 10))  { goangle();  xinc = (-1) * xinc; }
if ((yp >= (Hheight - 50)) || (yp <= 10)) {  goangle(); yinc = (-1) * yinc; }
setTimeout('space()', speed);
}
window.onload=space;
//  End -->
</script>

Step 2: The script uses an image as part of its interface. You can create your own, or use the below:

(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©