mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-09 09:20:15 +01:00
127 lines
2.6 KiB
HTML
127 lines
2.6 KiB
HTML
|
<HTML>
|
||
|
|
<BODY Background="rock_gra.gif" onload="startit();">
|
||
|
|
<DIV style="color:red; position:absolute; top:-40px; left:0px;">
|
||
|
|
<!-- <DIV style="opacity:0.4; color:red; position:absolute; top:-40px; left:0px;"> -->
|
||
|
|
<font point-size=200 face="verdana">
|
||
|
|
<b>Red</b>
|
||
|
|
</font></div>
|
||
|
|
<DIV style="color:darkgreen; position:absolute; top:50px; left:50px;">
|
||
|
|
<!-- <DIV style="opacity:0.4; color:darkgreen; position:absolute; top:50px; left:50px;"> -->
|
||
|
|
<font point-size=200>
|
||
|
|
<b>Green</b>
|
||
|
|
</font></div>
|
||
|
|
<DIV style="color:blue; position:absolute; top:100px; left:100px;">
|
||
|
|
<!-- <DIV style="opacity:0.4; color:blue; position:absolute; top:100px; left:100px;"> -->
|
||
|
|
<font point-size=200 face="comic sans ms">
|
||
|
|
<b>Blue</b>
|
||
|
|
</font></div>
|
||
|
|
<DIV style="background-color:pink; position:absolute; top:100px; left:100px;">
|
||
|
|
<font point-size=100 face="symbol">
|
||
|
|
<b>Opaque</b>
|
||
|
|
</font></div>
|
||
|
|
<script>
|
||
|
|
var d0x = -40, d0y = 0;
|
||
|
|
var d1x = 50, d1y = 50;
|
||
|
|
var d2x = 100, d2y = 100;
|
||
|
|
|
||
|
|
var d0xinc = 20, d0yinc = -20;
|
||
|
|
var d1xinc = -30, d1yinc = 20;
|
||
|
|
var d2xinc = 40, d2yinc = -30;
|
||
|
|
|
||
|
|
var opac0 = 40.0;
|
||
|
|
var opac1 = 40.0;
|
||
|
|
var opac2 = 40.0;
|
||
|
|
|
||
|
|
var opac0inc = 10.0;
|
||
|
|
var opac1inc = -10.0;
|
||
|
|
var opac2inc = 20.0;
|
||
|
|
|
||
|
|
function movedivs()
|
||
|
|
{
|
||
|
|
d=document.getElementsByTagName("div");
|
||
|
|
|
||
|
|
d0x += d0xinc;
|
||
|
|
d1x += d1xinc;
|
||
|
|
d2x += d2xinc;
|
||
|
|
|
||
|
|
d0y += d0yinc;
|
||
|
|
d1y += d1yinc;
|
||
|
|
d2y += d2yinc;
|
||
|
|
|
||
|
|
if ((d0x < -50) || (d0x > (window.innerWidth - 300)))
|
||
|
|
d0xinc = -d0xinc;
|
||
|
|
|
||
|
|
if ((d1x < -50) || (d1x > (window.innerWidth - 300)))
|
||
|
|
d1xinc = -d1xinc;
|
||
|
|
|
||
|
|
if ((d2x < -50) || (d2x > (window.innerWidth - 300)))
|
||
|
|
d2xinc = -d2xinc;
|
||
|
|
|
||
|
|
if ((d0y < -50) || (d0y > (window.innerHeight - 200)))
|
||
|
|
d0yinc = -d0yinc;
|
||
|
|
|
||
|
|
if ((d1y < -50) || (d1y > (window.innerHeight - 200)))
|
||
|
|
d1yinc = -d1yinc;
|
||
|
|
|
||
|
|
if ((d2y < -50) || (d2y > (window.innerHeight - 200)))
|
||
|
|
d2yinc = -d2yinc;
|
||
|
|
|
||
|
|
opac0 += opac0inc;
|
||
|
|
opac1 += opac1inc;
|
||
|
|
opac2 += opac2inc;
|
||
|
|
|
||
|
|
if (opac0 > 100.0)
|
||
|
|
{
|
||
|
|
opac0 = 100.0;
|
||
|
|
opac0inc = -opac0inc;
|
||
|
|
}
|
||
|
|
else if (opac0 < 0.0)
|
||
|
|
{
|
||
|
|
opac0 = 0.0;
|
||
|
|
opac0inc = -opac0inc;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (opac1 > 100.0)
|
||
|
|
{
|
||
|
|
opac1 = 100.0;
|
||
|
|
opac1inc = -opac1inc;
|
||
|
|
}
|
||
|
|
else if (opac1 < 0.0)
|
||
|
|
{
|
||
|
|
opac1 = 0.0;
|
||
|
|
opac1inc = -opac1inc;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (opac2 > 100.0)
|
||
|
|
{
|
||
|
|
opac2 = 100.0;
|
||
|
|
opac2inc = -opac2inc;
|
||
|
|
}
|
||
|
|
else if (opac2 < 0.0)
|
||
|
|
{
|
||
|
|
opac2 = 0.0;
|
||
|
|
opac2inc = -opac2inc;
|
||
|
|
}
|
||
|
|
|
||
|
|
d[0].style.left = d0x + "px";
|
||
|
|
d[0].style.top = d0y + "px";
|
||
|
|
/* d[0].style.opacity = 100/opac0;*/
|
||
|
|
|
||
|
|
d[1].style.left = d1x + "px";
|
||
|
|
d[1].style.top = d1y + "px";
|
||
|
|
/* d[1].style.opacity = 100/opac1;*/
|
||
|
|
|
||
|
|
d[2].style.left = d2x + "px";
|
||
|
|
d[2].style.top = d2y + "px";
|
||
|
|
/* d[2].style.opacity = 100/opac2;*/
|
||
|
|
|
||
|
|
setTimeout(movedivs, 10);
|
||
|
|
}
|
||
|
|
|
||
|
|
function startit() {
|
||
|
|
setTimeout(movedivs, 10);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</BODY>
|
||
|
|
</HTML>
|