|
Background Effects >>>
Dozens of snowflakes carelessly drift back and forth as they float down the browser window. You can even adjust the speed that the snowflakes move.
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
var
no =
25;
var
speed =
50;
var
snowflake =
"snow.gif";
var
ie4up =
(document.all)
?
1
:
0;
var
ns4up =
!ie4up;
var
dx,
xp,
yp;
var
am,
stx,
sty;
var
i,
doc_width =
800,
doc_height =
600;
if
(ns4up)
{
doc_width
=
self.innerWidth;
doc_height
=
self.innerHeight;
}
else
if
(ie4up)
{
doc_width
=
document.body.clientWidth;
doc_height
=
document.body.clientHeight;
}
dx
=
new
Array();
xp
=
new
Array();
yp
=
new
Array();
am
=
new
Array();
stx
=
new
Array();
sty
=
new
Array();
for
(i
=
0;
i <
no;
++
i)
{
dx[i]
=
0;
xp[i]
=
Math.random()*(doc_width-50);
yp[i]
=
Math.random()*doc_height;
am[i]
=
Math.random()*20;
stx[i]
=
0.02
+
Math.random()/10;
sty[i]
=
0.7
+
Math.random();
document.write("<div
id=\"dot"+
i +"\"
style=\"POSITION: ");
document.write("absolute;
Z-INDEX: "+
i +";
VISIBILITY: ");
document.write("visible;
TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake
+
"\" border=\"0\"></div>");
}
function
snowNS()
{
for
(i
=
0;
i <
no;
++
i)
{
yp[i]
+=
sty[i];
if
(yp[i]
>
doc_height-50)
{
xp[i]
=
Math.random()*(doc_width-am[i]-30);
yp[i]
=
0;
stx[i]
=
0.02
+
Math.random()/10;
sty[i]
=
0.7
+
Math.random();
doc_width
=
self.innerWidth;
doc_height
=
self.innerHeight;
}
dx[i]
+=
stx[i];
document.getElementById("dot"+i).style.top
=
yp[i];
document.getElementById("dot"+i).style.left
=
xp[i]
+
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()",
speed);
}
function
snowIE()
{
for
(i
=
0;
i <
no;
++
i)
{
yp[i]
+=
sty[i];
if
(yp[i]
>
doc_height-50)
{
xp[i]
=
Math.random()*(doc_width-am[i]-30);
yp[i]
=
0;
stx[i]
=
0.02
+
Math.random()/10;
sty[i]
=
0.7
+
Math.random();
doc_width
=
document.body.clientWidth;
doc_height
=
document.body.clientHeight;
}
dx[i]
+=
stx[i];
document.all["dot"+i].style.pixelTop
=
yp[i];
document.all["dot"+i].style.pixelLeft
=
xp[i]
+
am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()",
speed);
}
if
(ns4up)
{
snowNS();
}
else
if
(ie4up)
{
snowIE();
}
</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.
↓
|