Matrix Background Animation

The effect will create a matrix effect by using images.

Over 2000+ free Javascript
at Website
I thought this would be kinda neat to have this as the background of a webpage. Due to its distraction factor, I would suggest having it only in an intro page or something.

By the way, I did not steal any of these images, I created some matrix-like images using a graphics program.


1: OK, there is one little detail about this script that has to be worked around. You have to put all of your page's content in an absolutely-positioned <DIV> element. This is so the glyphs appear behind your content and not over it.

First, you have to define a style sheet in the <HEAD> section of your page. You can copy/paste the code below if you want:
Select all...

2: Then "wrap" all your HTML content except the HTML that loads the script (more on this below). Also, give the DIV element a classname that you defined in the stylesheet in the previous step.
Select all...

3: Now, add the HTML needed to load the script in your page. Copy this at the very end just before the </body> tag and not in the DIV you created in the previous step.
Select all...

4: There are some settings in the js file you can use to adjust the way the script behaves:

5: Performance notes:

While this script works in NS4.x, NS6, and IE5+, it seems to require more processing power when run in Netscape 6.x browsers. In my system (Athlon 1.33GHz / 256M DDR RAM / WinXP Pro), IE6 and Netscape 4.78 used only 1% of the CPU and about 11MB of RAM, but Netscape 6 needed about 35% of the CPU and 24MB of RAM (with brightness enabled)!. So, be careful when adding too many glyphs, unless you do not care about NS6 users :)

There are a lot of "things" going on in this script so be careful about adding other scripts along with this one to your page. Your browser may start to get sluggish if it is forced to do too much.