Code:
<html>
<head>
<style type="text/css">
bg_image
{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
}
body
{
background-image: url('http://whatisthematrix.warnerbros.com/rv_desktops/img/24_1024x768.jpg');
background-position: center;
}
.matrix
{
font-family: 'Garamond';
color: #00ff00;
font-size: 30px;
font-weight: 800;
}
</style>
<script type="text/javascript">
var zindex = 0
var zindextext = "";
var i, j;
var alphabet = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
var incrementx = 250;
var widthx = 1000;
var heighty = 0;
var incrementy = 25;
var temp;
var top = 0;
var additions = "";
var curY = 0;
document.write("<div id=\"MATRIXGOUP\" style=\"position: absolute;\">");
for(i = 0; i < widthx; i += incrementx) { // x
for(j = 0; j < heighty; j += incrementy) { // y
zindex%2>0?zindextext="z-index: 1":zindextext="z-index: 2";
temp = Math.round(Math.random()*alphabet.length-1)
temp<0?temp=0:temp=temp;
document.write("<span class=\"matrix\" style=\" position: absolute; "+zindextext+"; left: "+i+"; top: "+j+"\">"+alphabet[temp]+"</span>");
zindex++;
curY = j;
}
}
document.write("<span id=\"addit\"></span></div>");
</script>
</head>
<body>
<script type="text/javascript">
function goup() {
addbottom();
top -= 10;
document.getElementById("MATRIXGOUP").style.top = top;
setTimeout("goup()", 75);
}
function addbottom() {
for(i = 0; i < widthx; i+=incrementx)
{
zindex%2>0?zindextext="z-index: 1":zindextext="z-index: 2";
temp = Math.round(Math.random()*alphabet.length-1)
temp<0?temp=0:temp=temp;
additions = additions+"<span class=\"matrix\" style=\" position: absolute; "+zindextext+"; left: "+i+"; top: "+curY+"\">"+alphabet[temp]+"</span>";
document.getElementById("addit").innerHTML = additions;
}
curY += incrementy;
}
goup();
</script>
</body>
</html>current code
What I want it to do is have the text scroll down the page, without increasing the y-axis and enabling the y-axis scrollbar (Which it does, atleast in interenet explorer, which is all that matters because this is a school thing and they dont believe in mozilla ><).
Also, instead of the alphabet array, I want to be able to input a sentence
i.e. "TechEnclave is awesome" and it print that vertically down the page, one character at a time, beginning with the T in TechEnclave, ending with the e in awesome like the way it already does it, except instead of a random letter in the alphabet array, I want a "MyReader" type of thing which will read the line hard-coded into the program and write it as it already write (print a letter, move up, print another letter, etc.).
Basically I want this program to print a paragraph that I hard-code into it that looks like the matrix. If it's possible to make the text scrolling down the page at different levels, that would also be appreciated.
This is for a class which is learning HTML, and since I learned HTML about 6 years ago, I thought I'd take this opportunity to learn javascript and css and integrate it into the html and get an easy 100%.
Any help is very much appreciated
- IR.Zeo
P.S.: attached is the .txt file