マトリックス風な画面を動的に生成するページ

Read More

マトリックス風な画面をHTML、Javascript、CSSのみで作ることができる。

ページにアクセスするだけでこのように文字が流れる。



本家にいくと余計なゴミが表示されてしまうので該当コード部分のみのページを用意した。
■マトリックス風な画面のページ
http://xirasaya.com/demo/15/

うまく画面が表示されない場合は別のブラウザで試すこと。
自分の環境ではIEだとJavasエラーが発生してうまく動かなかったがFirefoxとChromeではうまく動いた。



■マトリックス風なページのコード
<body style=margin:0 onload="for(s=window.screen,w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[],i=0;i<256;p[i++]=1);setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,w,h)9Style=\'#0F0\';p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext(\'2d\').fill'),33)"><canvas id=q>



改行コードを入れてないので長いが上記コードをコピーしテキストファイルにペースト。
ファイル名をindex.htmlとし保存。
あとはファイルをブラウザにドロップすればよい。






参考サイト)
■Matrix Canvas Code | CSSDeck
http://cssdeck.com/labs/the-matrix







Category "HTML・JS・CSS" の最新記事