Creating Matrix Wall with HTML, CSS and Javascript
You can watch the speed code video of this example above. Also you can get codes on this repo.
In this example we will try to simulate the Matrix Wall, flowing green characters, used in the Matrix movie. All DOM elements will be managed with Javascript so our body tag in index.html will be empty.
We calculated the number of columns and rows on the Javascript side and started to place our p(column) and span(row) elements with two nested loops. Here we used the column width 30px in both Javascript and CSS.
With the setupColumn function, we make calculations for each column, add and show random characters. After a random character is written in to the span element, its animation created and it is added to the column element (p).
We call the setupColumn function recursively at the animationend event of the last span element in the column, and rebuild the same column again with different delay time and characters.
The getRandomChar function uses the String.fromCharCode() function in Javascript. This function gets a hexadecimal number and returns the corresponding UTF-16 character. You can see the ranges for UTF-16 on here.
